我想根据 JSON 对象数组的值是 1 还是 0 来更改 div。我的问题是这段代码在每次迭代期间更新所有 div,而不是只更新循环索引的相应 div。
首先,我使用了 jQuery .css 方法,但它只执行第一个足够公平的方法......接下来我尝试使用 .addClass,然后最后使用 $(this) 与 .closest、.descendants 和其他一些类似的过滤方法。
我已经检查了控制台上的预期输出,这很好。我们会说有 2 个 div,我只想更改与当前循环索引相关的任何一个。在这种情况下,即使使用 .each 甚至 for 循环,addClass 也会始终更改它们,我说得对吗?
<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');
}
});
});
});
最佳答案
我认为这应该可以满足您的需求。如果没有更好的测试设置,我无法验证它:
$(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 ) 将选择与您正在测试的值具有等效索引的框。
关于迭代期间的jQuery addclass但仅更改当前div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35471853/