如何通过事件增加/减少对象的属性值？

Question

Im trying to use the accordion widget for jQuery-ui. What i am trying to build is a function that will cycle through all the tabs with a swipe. For the sake of this example i am using a click event since i have the swipe up/down event listener working separately and is off topic from my question. Essentially a user will swipe or click an area and the tabs will cycle the 3 sections back and forth.

Am i on the right track or is there a better way to accomplish this?

jsFiddle demo

JS

$(function () {
    $("#accordion").accordion({
        collapsible: true,
        active: false
    });
});


$('#cycle').click(function () {

    $('#accordion').accordion({
        active: 0
    });

    function incrementAccValue(obj, val) {
        obj = $('#accordion').accordion({
            active: val
        });

        obj.active++ //stuck here..?

    }

});

//How to increment an object's property value?

Answer 1

You are on the right track. You just need to store the active number outside of the scope of the click function so that the value will be available on the next click event.

Something like this should work: http://jsfiddle.net/30vm5y75/

var max_items = $('#accordion h3').length;
var current_item = 0;

$('#cycle').click(function () {

    $('#accordion').accordion({
        active: current_item
    });

    if (current_item < max_items-1) {
        current_item = current_item + 1;
    } else {
         current_item = 0;   
    }

});

Answer 2

Not sure if this is what you need, but I have updated your fiddle here .

Updated JS:

var activeIndex = 0,
    maxIndex = $("#accordion h3").length - 1;

$(function () {
    $("#accordion").accordion({
        collapsible: true,
        active: false
    });
});

$('#cycle').click(function () {

    $('#accordion').accordion({
        active: activeIndex
    });

    activeIndex = ( activeIndex == maxIndex ? 0 : activeIndex+1);

});   

Answer 3

From the doc:

// Getter
var active = $( ".selector" ).accordion("option", "active" );

// Setter
$( ".selector" ).accordion( "option", "active", 2);

So, you don't have to store the current index anywhere; just get the active index, then set the active index to active + 1 or the length of the accordion minus one, whichever is smaller.