Question

我创建了 CheckBox 元素的列表，并使用与前面提到的列表相同的值选择。我要做的是，如果我更改 CheckBox 选项，选择列表会自动将自身更新为与 CheckBox 相同的命名选项。我用纯粹的 JavaScript （并且它正在工作）创建了这个：

function addChckBoxListener() {
    for (var i = 0; i < chckBox.length; i++) {
        (function(index) {
            chckBox[i].addEventListener("change", function() {
                update(0, index);
            });
        })(i);   
    }    
}

function addSelectListListener() {
    selectList.addEventListener("change", function() {
        update(1, this.selectedIndex); 
    });
}

后来，我想用 jQuery 库实现相同的功能，但它的 index（）函数返回错误的索引。我不知道为什么。这是相同的代码，但在jQuery中：

function addChckBoxListener() {
    chckBox.each(function() {
        $(this).change(function() {
            update(0, $(this).index());    
        });
    });   
}
function addSelectListListener() {
    selectList.change(function() {
        update(1, $(this).selectedIndex);  
    });
}

这是我的HTML代码：

<body>
    <div>
        <ul>
            <li><input type="checkbox" value="red">&nbsp;Czerwony</li>
            <li><input type="checkbox" value="blue" checked>&nbsp;Niebieski</li>
            <li><input type="checkbox" value="green">&nbsp;Zielony</li> 
        </ul>
        <select name="selectColors">
            <option value="red">Czerwony</option>
            <option value="blue" selected="selected">Niebieski</option>
            <option value="green">Zielony</option>
        </select>
    </div>
</body>

如果你想测试这段代码，这里是链接（JSFiddle）：https://jsfiddle.net/8yayr972/1/

Answer 1

似乎问题在于使用index。复选框始终是li内的第一个元素。所以无论它是什么＆＃39;索引将为0. li的索引似乎很有用。所以在此函数内部，不是查询复选框的索引，而是查询它的父级索引li

function addChckBoxListener() {
  chckBox.each(function() {
    $(this).change(function() {
     update(0, $(this).parent().index()); // changed here
    });
  });
}

DEMO

jQuery - index（）函数返回错误的索引（CheckBox和Select）

1 个答案: