Question

我正在构建一个网页，其中许多跨度需要从一个类转换到另一个类以创建bg颜色的淡化效果。通过页面混合了相同类的元素的分布，但它们都被分组在公共类下。</ p>

我想创建一个执行以下操作的行为：当您单击class-n的任何元素时，该类的其他元素将转换，并将单击的元素作为起点。

由于对SO的一些帮助，这大部分都被弄明白了; see the jsfiddle。

$(".div").click(function () {
    var itemClasses = this.classList;
    var itemThread = itemClasses[1];

    colorThread($(this), itemThread);
    console.log(itemThread);
});

function colorThread($div, tId) {
    tId = '.'+tId;
    $div.toggleClass('div-clicked');

    setTimeout(function () {

        (function togglePrev($div) {
                $div.toggleClass('div-clicked');
            setTimeout(function () {
                togglePrev($div.prev(tId));
            }, 100);
        })($div.prev(tId));

        (function toggleNext($div) {
                $div.toggleClass('div-clicked');
            setTimeout(function () {
                toggleNext($div.next(tId));
            }, 100);
        })($div.next(tId));

    }, 100);
}

然而，我仍在努力解决一个特定的问题：如果遇到不同的类，我不希望转换停止，我只是希望它不要切换并继续迭代。如果jsfiddle，它将在所有相同的颜色div中转换为转换，而不管它们在DOM树中的位置。

在我的togglePrev / toggleNext函数中，我尝试了一些东西

if($div.hasClass(".classToTransition")) 
{ 
$div.toggleClass(".div-clicked");
}

但无法使其正常工作（它不会对下一个元素进行说明）。在条件结构中我似乎无法掌握一些东西。任何人都有领导？

Answer 1

你真的设法使一些非常简单的东西复杂化了吗？

$(".div").click(function () {
    var coll = $('.'+this.className.replace(/(div-clicked|div)/g, '').trim()),
        idx  = coll.index($(this).toggleClass('div-clicked'));

    $.each(coll, function(i) {
        setTimeout(function() {
            if (idx + i <= coll.length) coll.eq(idx + i).toggleClass('div-clicked');
            if (idx - i >= 0) coll.eq(idx - i).toggleClass('div-clicked');
        },i*200);
    });
});

FIDDLE

它获取的所有元素与当前单击的元素具有相同的类，以及当前单击的索引，然后只需向当前索引添加和减去1即可获得下一个和前一个元素。检查是为了确保它到达终点时停止。

Answer 2

如果遇到不同的类，我不希望转换停止，我只是希望它不要切换并继续迭代

您可能希望使用nextAll(tId).first() / prevAll(tId).first()来选择下一个要切换的元素：http://jsfiddle.net/35uNW/4/。 .next()仅查看下一个兄弟，如果与您的tId选择器不匹配，则不会选择任何元素。

如果要迭代不同类别的元素以便等待每个元素，但又不想切换它，则可以使用if条件，但必须从中删除tId选择器next() / prev()来电：http://jsfiddle.net/35uNW/3/。

Answer 3

这是一个有趣的。我做了一个稍微不同的方法，获取所有匹配的元素并将它们分成数组之前和之后。

var $allItems = $(".div");

$(".div").click(function () {
    var itemClasses = this.classList;
    var itemThread = itemClasses[1];

    colorThread($(this), itemThread);
});

function colorThread($div, classname) {

    var tId = '.'+classname,
        $divs = $allItems.filter(tId),
        index = $divs.index($div),
        $before = $divs.slice(0, index),
        before = $before.get().reverse(),
        $after = $divs.slice(index+1);

    $div.toggleClass('div-clicked');

    $(before).each(function(i, item){
         setTimeout(function () {
             $(item).toggleClass('div-clicked');
         }, i*100);
    });

    $($after).each(function(i, item){
        setTimeout(function () {
            $(item).toggleClass('div-clicked');
        }, i*100);
    });

}

这是一个工作小提琴：http://jsfiddle.net/5sUr4/

jQuery迭代遍历类的所有项，而不管它们在DOM中的位置

3 个答案: