jQuery:如何在指定的html元素区域使用元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (156)

我怎么才能img.src只适用于指定的imgselect和目标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>

提问于
用户回答回答于

在你的例子中,下面的代码将起作用。因为在你的情况下image的下一个元素。.selector所以它可以通过next()方法。你可以阅读更多关于jQuery的next()方法。

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

或:

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

jQueryparent()方法选择元素的父级,并且只在DOM树上移动一个级别,然后我们可以找到image在里面。

用户回答回答于

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

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

这是从this的实例.selector引发更改事件,则导航到最近的父级。div,然后搜索div用于匹配.target_image元素(其中有一个元素)。src属性的值。.selector从而引发了这一事件。

请注意,任何jQueryDOM导航,无论是向上遍历,然后后退,还是遍历同级元素,如果DOM结构曾经发生变化,都会受到破坏,这取决于您决定哪些更改比其他更改更有可能发生或更不可能发生。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励