jquery：如何使用指定 html 元素区域中的元素？答案

【问题标题】：jquery: how to work with elements in area of specified html element?jquery：如何使用指定 html 元素区域中的元素？
【发布时间】：2018-06-20 13:05:12
【问题描述】：

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

$(".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>

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

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

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

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

请注意，任何 jQuery DOM 导航，无论是向上然后向下遍历还是跨兄弟元素遍历，都可能会在 DOM 结构发生变化时中断。由您决定哪些更改比其他更改更有可能或不太可能。

【讨论】：

【解决方案2】：

使用siblings函数选择与当前选中元素同级的图片，使用$(this).val()获取当前选中元素的值

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

【讨论】：

【解决方案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

【讨论】：

请花时间描述问题是什么以及为什么这个解决方案有帮助。请记住，我们在这里是为了教育人们，而不仅仅是在他们身上转储代码。

【解决方案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。

【讨论】：