Question

我想根据JSON对象数组是值1还是0来改变div。我的问题是这段代码在每次迭代期间更新所有div而不是仅对应于循环索引的div。

首先我使用了jQuery .css方法，但只做了第一个足够公平的方法...接下来我尝试使用.addClass，最后使用.closest，.descendants和其他类似过滤的$（this）方法

我已在控制台上检查了预期的输出，这很好。我们说彼此之后有两个div，我只想改变与当前循环索引相关的任何一个。我是否正确地说addClass在这种情况下总是会改变它们，即使使用.each甚至是for循环也是如此？

<div class="box">
<div class="box">

$(function () {
    $.getJSON('js/test.json', function (step1) {
        $.each(step1.object, function (index, value) {
            if (value == 1) {
                $(".box").addClass("engaged");
                console.log('Engaged');
            } else {
                $(".box").addClass("disengaged");
                console.log('Disengaged');
            }
        });
    });
});

Answer 1

我认为这应该能满足你的需求。如果没有更好的测试设置，我无法验证它：

$(function () {
    $.getJSON('js/test.json', function (step1) {
        var $boxes = $(".box");
        $.each(step1.object, function (index, value) {
            if (value == 1) {
                $boxes.eq(index).addClass("engaged");
                console.log('Engaged');
            } else {
                $boxes.eq(index).addClass("disengaged");
                console.log('Disengaged');
            }
        });
    });
});

此代码将找到所有框，然后eq函数（docs）将选择与您正在测试的值具有相同索引的那个。

Answer 2

在每次迭代中，您需要定位当前索引中的box元素，但是当您说$('.box').addClass()时，它会将该类添加到所有box元素中。

您还可以使用其他方式执行此操作，

$(function() {
  $.getJSON('js/test.json', function(step1) {
    $(".box").addClass(function(i) {
      return step1.object[i] == 1 ? 'engaged' : 'disengaged'
    })
  });
});

迭代期间jQuery addclass但只更改当前div

2 个答案: