javascript - Jquery 动态属性

Question

我有这个代码:

$('.myClass')[0].src += "somethinghere";

而且我的 myClass 也有多个 Div。

如何让 [0] to by 与所选 Div 相关？

例如:

$('.myClass')[this].src += "somethinghere";

这是js:

$(document).ready(function() {

        $(document).on("mouseover",".myClass",function(){

        //code here

        });      

});

HTML 是:

<div>
   <a class="myLinkClass" href="" target="_blank">Hover Here</a>
   <div class="box">
   <iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
  </div>
</div>

<div>
   <a class="myLinkClass" href="" target="_blank">Hover Here</a>
   <div class="box">
   <iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
  </div>
</div>

<div>
   <a class="myLinkClass" href="" target="_blank">Hover Here</a>
   <div class="box">
   <iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
  </div>
</div>

似乎每次都有效的是:

$('.myIframeClass')[0].src += "something"; 

但它只适用于第一个 iframe，不适用于其他

Answer 1

您可以直接使用this
更新:更新答案(使用真实的html)后，您需要使用closest方法来查找容器div 然后 .find 来定位实际的 iframe

$(document).ready(function() {
  $(document).on("mouseover", ".myLinkClass", function() {
    var iframe = $(this).closest('div').find('iframe').get(0);
    iframe.src += 'something%20';
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
  <a class="myLinkClass" href="" target="_blank">Hover Here</a>
  <div class="box">
    <iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-1" frameborder="0"></iframe>
  </div>
</div>

<div>
  <a class="myLinkClass" href="" target="_blank">Hover Here</a>
  <div class="box">
    <iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-2" frameborder="0"></iframe>
  </div>
</div>

<div>
  <a class="myLinkClass" href="" target="_blank">Hover Here</a>
  <div class="box">
    <iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-3" frameborder="0"></iframe>
  </div>
</div>

<小时/>

请记住，div 元素没有 src 属性。

如果它们确实是 div 元素，您可能需要使用 .attr 方法。

$(document).ready(function() {
        $(document).on("mouseover",".myClass",function() {
           var element = $(this),
               currentSrc = $(this).attr('src');

           element.attr('src', currentSrc + 'something');
        });      
});