我有 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');
});
}
});
但它是错误的。请让我知道我可以做些什么来修复它。谢谢。
最佳答案
使用数据属性
<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'));
});
});
您也可以从源中获取数字,但数据属性似乎更简单
关于javascript - jquery中的for循环错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20975948/