blocks|key|4171840|text|在您的示例中，以下代码将起作用。因为在本例中，image是.selector的下一个元素，所以可以通过next()方法遍历它。您可以阅读有关jQuery的next()方法here的更多信息。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4171841|$(".selector").change(function(){
++++$(this).next("#target_image").attr("src",$(this).val())
});|code-block|syntax|javascript|4171842|或者：|4171843|$(".selector").change(function(){
++++$(this).parent().find("#target_image").attr("src",$(this).val())
});|4171844|jQuery+parent()方法选择元素的父元素，并且只在DOM树中向上移动一层，然后我们就可以在其中找到image。|4171845|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/next/^0|N|5|T|9|1F|6|25|6|2D|4|0|0|0|0|0|7|8|1I|5|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1B|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>In your case the following code will work. Because in your case <code>image</code> is the next element of the <code>.selector</code> so it can be traverse by <code>next()</code> method. You can read more about jQuery's <code>next()</code> method <a href="https://api.jquery.com/next/" rel="nofollow noreferrer">here</a>.</p>

<pre><code>$(".selector").change(function(){
    $(this).next("#target_image").attr("src",$(this).val())
});
</code></pre>

<p>or:</p>

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

<p>jQuery <code>parent()</code> method selects the parent of the element and only travels a single level up the DOM tree, and then we can find the <code>image</code> inside it.</p>


blocks|key|4171343|text|您可以使用DOM遍历来查找从调用事件的元素开始的目标元素。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4171344|$(".selector").change(function(){
++++$(this).closest("div").find(".target_image").attr("src",+$(this).val());
});|code-block|syntax|javascript|4171345|这从this开始，它是引发change事件的.selector实例，导航到最接近的父div，然后在该div中搜索匹配的.target_image元素(其中有一个)。然后，它将该元素上的src属性设置为引发事件的.selector的值。|offset|length|style|CODE|4171346|请注意，任何jQuery+DOM导航，无论是向上遍历然后向下遍历，还是跨兄弟元素遍历，如果DOM结构发生变化，都会受到破坏。您可以决定哪些更改比其他更改更有可能或更不可能。|4171347|entityMap^0|0|0|2|4|M|9|16|3|1E|3|1N|D|2K|3|2X|9|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]|$I|Z|J|10|K|L]|$I|11|J|12|K|L]|$I|13|J|14|K|L]|$I|15|J|16|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|P|$]]

<p>You can use DOM traversal to find the target element starting from the element which invoked the event.  For example:</p>

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

<p>This starts at <code>this</code>, which is the instance of <code>.selector</code> that raised the change event, navigates to the closest parent <code>div</code>, then searches that <code>div</code> for matching <code>.target_image</code> elements (of which there is one).  Then it sets the <code>src</code> attribute on that element to the value of the <code>.selector</code> which raised the event.</p>

<p>Note that any jQuery DOM navigation, whether traversing up and then back down or whether traversing across sibling elements, is subject to breaking if the DOM structure ever changes.  It's up to you to decide which changes are more likely or less likely than others.</p>


blocks|key|4171371|text|使用siblings函数选择当前所选元素的同级图像，使用$(this).val()获取当前所选元素的值|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4171372|$(".selector").change(function(){
++++$(this).siblings(".target_image").attr("src",$(this).val())
});|code-block|syntax|javascript|4171373|entityMap^0|2|8|S|D|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Use <code>siblings</code> function to select the image that is a sibling of the currently selected element, use <code>$(this).val()</code> to get the value of the current selected element</p>

<pre><code>$(".selector").change(function(){
    $(this).siblings(".target_image").attr("src",$(this).val())
});
</code></pre>


<p>How can I set <code>img.src</code> only for specified the <code>img</code>? <code>select</code> and target <code>img</code> must have the same parent div.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(".selector").change(function() {
  $(".target_image").attr("src", $(".selector").val())
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div&gt;
  &lt;select class="selector"&gt;
    &lt;option value='src1'&gt;1&lt;/option&gt;
    &lt;option value='src2'&gt;2&lt;/option&gt;
  &lt;/select&gt;
  &lt;img class='target_image' src='' \&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;select class="selector"&gt;
    &lt;option value='src3'&gt;1&lt;/option&gt;
    &lt;option value='src4'&gt;2&lt;/option&gt;
  &lt;/select&gt;
  &lt;img class='target_image' src='' \&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


jquery: how to work with elements in area of specified html element?

jQuery

如何仅为指定的img设置img.src？select和目标div必须具有相同的父img。​$(".selector").change(function() {  $(".target_image").attr("src", $(".selector").val())});<script src="https://aja...

问jquery:如何处理指定html元素区域中的元素？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery:如何处理指定html元素区域中的元素？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery:如何处理指定html元素区域中的元素？
EN