javascript - jquery中的for循环错误

Question

我有 HTML 结构:

<div class="image">
    <img src="image/image.png" alt="image" />
    <img src="image/image.png" alt="image" />
    <img src="image/image.png" alt="image" />
    <img src="image/image.png" alt="image" />
    <img src="image/image.png" alt="image" />
</div>

<select class="select">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
    <option value="4">Value 4</option>
    <option value="5">Value 5</option>
</select>

我想单击图像，然后选择相应的选项:例如，当我单击 image-1 时，会选择选项 value="1"。我尝试过这些行代码:

$(document).ready(function () {
    var image = $(".image img");
    var option = $(".select option");
    for (var i = 0; i < image.length; i++) {
        var img = image.eq(i);
        var op = option.eq(i);
        img.click(function () {
            op.addClass('selected');
        });
    }
});

但它是错误的。请让我知道我可以做些什么来修复它。谢谢。

Answer 1

使用数据属性

<div class="image">
    <img src="image/image-1.png" alt="image" data-option="1" />
    <img src="image/image-2.png" alt="image" data-option="2" />
    <img src="image/image-3.png" alt="image" data-option="3" />
    <img src="image/image-4.png" alt="image" data-option="4" />
    <img src="image/image-5.png" alt="image" data-option="5" />
</div>

那么你就可以这样做

$(document).ready(function(){
    $('.image img').on('click', function() {
        $('.select').val($(this).data('option'));
    });
});

您也可以从源中获取数字，但数据属性似乎更简单