JS

Question

我试图将手风琴小部件用于jQuery-ui。我想要构建的是一个通过滑动循环遍历所有选项卡的功能。为了这个例子，我使用了一个点击事件，因为我有一个单独的向上/向下滑动事件监听器，并且不在我的问题中。用户基本上会滑动或单击某个区域，标签将来回循环3个部分。

我是在正确的轨道上还是有更好的方法来实现这一目标？

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

你走在正确的轨道上。您只需将活动数存储在click函数的范围之外，以便在下一次单击事件时该值可用。

这样的事情应该有效：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

不确定这是否是您所需要的，但我已更新您的小提琴here。

更新了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

来自doc：

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

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

因此，您不必将当前索引存储在任何位置;只需获取活动索引，然后将活动索引设置为active + 1或将手风琴的长度减去1，以较小者为准。

如何使用事件递增/递减对象属性值？

JS

3 个答案: