Javascript jquery中的For循环错误

我有一个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
价值2
价值3
价值4
价值5

我想单击一个图像，然后选择选项对应：Example当我单击图像-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');
        });
    }
});

$（文档）.ready（函数（）{
var image=$（“.image img”）；
var option=$（“.select option”）；
对于（变量i=0；i

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

使用数据属性

<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>

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

使用数据属性

<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 () {
    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);
    }
});

$（文档）.ready（函数（）{
var image=$（“.image img”）；
var option=$（“.select option”）；
对于（变量i=0；i

更新： 一个更简单的选择：

$(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');
        });
    }
});

$（文档）.ready（函数（）{
var image=$（“.image img”）；
var option=$（“.select option”）；
对于（变量i=0；i

更新2

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

< P>试试这个代码：

$(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);
    }
});

$（文档）.ready（函数（）{
var image=$（“.image img”）；
var option=$（“.select option”）；
对于（变量i=0；i

更新： 一个更简单的选择：

$(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');
        });
    }
});

$（文档）.ready（函数（）{
var image=$（“.image img”）；
var option=$（“.select option”）；
对于（变量i=0；i

更新2

---

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

< P>如果图像的顺序总是与选择选项的值匹配，即第一个图像匹配第一个选项值，第二个图像匹配第二个选项，那么，你可以简化如下：

$('.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元素上设置selected属性）或只是向其添加一个类，如示例所示。我的代码同时执行这两项操作，因此如果不需要同时执行这两项操作，您可以从代码中删除相应的行。

如果图像的顺序始终与选择选项的值匹配，即第一个图像与第一个选项的值匹配，第二个图像与第二个选项的值匹配等等，您可以将其简化为：

$('.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元素上设置selected属性）或只是向其添加一个类，如示例所示。我的代码同时执行这两项操作，所以如果不需要同时执行这两项操作，您可以从代码中删除相应的行。

请参阅经典的循环范围问题

op

将始终以最后一个为目标，javascript中的for循环不会为每次迭代创建新的作用域。关于标题：for循环在javascript中，而不是在jquery中。请参阅经典for循环作用域问题

op

将始终以最后一个为目标，javascript中的for循环不会为每次迭代创建新的作用域。关于标题：for循环在javascript中，而不是在jquery中。我认为应该是这样的：

$（'.select'）.val（$（this.attr（'data-option'））

虽然在本例中我也会使用

.attr

，但在本例中使用

.data

并没有什么问题。（将字符串转换为int没有意义，只是将其转换回字符串）jQuery的

data（）

用于获取（但不是设置）数据属性，以及在jQuery内部存储

data（）

，使用数据属性方法来确定目标对于触发器元素和目标之间可能没有一对一关系或者DOM中触发器/目标的顺序不匹配的情况特别有用。如果OP不考虑这一点（即DOM中的触发器/目标顺序始终匹配），则可以使用更简化的方法，即使用触发器的索引位置来确定目标，而不需要数据属性虽然在本例中我也会使用

.attr

，但在本例中使用

.data

并没有什么问题。（将字符串转换为int没有意义，只是将其转换回字符串）jQuery的

data（）

用于获取（但不是设置）数据属性，以及在jQuery内部存储

data（）

，使用数据属性方法来确定目标对于触发器元素和目标之间可能没有一对一关系或者DOM中触发器/目标的顺序不匹配的情况特别有用。如果OP没有考虑到这一点（即DOM中的触发器/目标顺序始终匹配），那么可以使用更简单的