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>

我想单击图像然后选择选项对应：当我单击图像-1时，可以选择选项值=“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'));
    });
});

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

Answer 2

试试这段代码：

$(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);
        (function(op) {
            img.click(function () {
                op.addClass('selected');
            });
        })(op);
    }
});

<强>更新一个更简单的选择：

$(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({op: op}, function (e) {
            e.data.op.addClass('selected');
        });
    }
});

更新2

虽然这段代码应该可行，但有更简单的方法可以使它工作。请考虑adeneo的回答和Kevin B的评论

Answer 3

如果图像的顺序始终与选择选项的值匹配，即第一个图像与第一个选项值匹配，第二个图像与第二个选项匹配，依此类推，您可以按如下方式简化：

$('.image').click(function() {
    var index = $('.image').index(this);
    $target = $('.select option').eq(index);
    $target.prop('selected', true); // selects the option
    $target.addClass('selected'); // adds class to option
}

我不确定您是否打算实际选择该选项（即在DOM元素上设置所选属性），或者只是向其中添加一个类，如示例所示。我的代码同时执行这两个操作，因此如果您不需要同时执行这两个操作，则可以从中删除相应的行。

对于jquery中的循环错误

3 个答案: