Question

如何仅为指定的img.src设置img？ select和目标img必须具有相同的父分区。

$(".selector").change(function() {
  $(".target_image").attr("src", $(".selector").val())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select class="selector">
    <option value='src1'>1</option>
    <option value='src2'>2</option>
  </select>
  <img class='target_image' src='' \>
</div>
<div>
  <select class="selector">
    <option value='src3'>1</option>
    <option value='src4'>2</option>
  </select>
  <img class='target_image' src='' \>
</div>

Answer 1

您可以使用DOM遍历来找到从调用事件的元素开始的目标元素。例如：

$(".selector").change(function(){
    $(this).closest("div").find(".target_image").attr("src", $(this).val());
});

此操作从this开始，它是引发更改事件的.selector的实例，导航到最接近的父级div，然后在该div中搜索匹配的{ {1}}个元素（其中有一个）。然后，它将该元素上的.target_image属性设置为引发事件的src的值。

请注意，如果DOM结构发生变化，任何jQuery DOM导航（无论是向上然后向下还是在同级元素之间进行遍历）都可能会中断。由您决定哪些更改比其他更改更可能或更少。

Answer 2

使用siblings功能选择作为当前所选元素的同级图像，使用$(this).val()获取当前所选元素的值

$(".selector").change(function(){
    $(this).siblings(".target_image").attr("src",$(this).val())
});

Answer 3

尝试一下：

$(".selector").change(function(){
    $(this).parents().find('img.target_image').attr('src',$(this).val());
});

$(".selector").change(function()触发
$(this).parents()获取选择框的父元素
.find('img.target_image')找到具有类别的img标签 target_image
.attr('src',$(this).val());设置当前更改选定的值到图像src

Answer 4

在您的情况下，以下代码将起作用。因为在您的情况下image是.selector的下一个元素，所以可以通过next()方法遍历它。您可以了解有关jQuery的next()方法here的更多信息。

$(".selector").change(function(){
    $(this).next("#target_image").attr("src",$(this).val())
});

或：

$(".selector").change(function(){
    $(this).parent().find("#target_image").attr("src",$(this).val())
});

jQuery parent()方法选择元素的父级，并且仅在DOM树上移动一个级别，然后我们可以在其中找到image。

jQuery：如何使用指定html元素区域中的元素？

4 个答案: