Question

我正在编写一个替换两个图像的简单脚本。第一个交换正常，但第二个由于某种原因不会开火。它必须是我想念的简单事物。也许'div.singleTint img'选择器？有人可以看看并仔细检查我的工作吗？

这是我的HTML：

    <div id="beerGlassOverlay">
    <img src="<?php bloginfo('template_directory'); ?>/images/beerOverlay.png" class="glassreplace">
</div>

<li class="image-rollover">
    <a href="http://brasco.co/Mims/meet-the-breweries/miller-beers/" target="_blank">
        <img width="177" height="186" src="http://brasco.co/Mims/wp-content/uploads/2012/05/miller1.png" class="attachment-full wp-post-image" alt="miller" title="miller" />
    </a>
    <div class="singleTint">
        <img width="279" height="524" src="http://brasco.co/Mims/wp-content/uploads/shrekBeer.png" class="attachment-full" alt="shrekBeer" title="shrekBeer" />  
    </div><!-- End singleTint-->
</li>

这是我的jQuery：

$('li.image-rollover').mouseover(function() {   
$('img.glassreplace').attr({//Change the src and size info on hover         
    src: ('div.singleTint img', this).src,
    width: '100%',
    height: '100%'
    });
});`

Answer 1

改变这个：

src: ('div.singleTint img', this).src,

为：

src: $('div.singleTint img', this).attr('src'),

Answer 2

src: ('div.singleTint img', this).src,应该成为src: $('div.singleTint > img', this).attr("src"),

（我添加了子选择器 - >）

Answer 3

您是否在代码的第三行（$）错过了jQuery对象引用？

 $('li.image-rollover').mouseover(function() {   
 $('img.glassreplace').attr({//Change the src and size info on hover         
    src: $('div.singleTint img', this).src, //Added the jQuery object in front of the parenthesis.
    width: '100%',
    height: '100%'
    });
 });

为什么我的jQuery选择器不工作？

3 个答案: