Question

我有一张主图像和一些缩略图。我想要完成的是当鼠标悬停在缩略图上时，主图像源将被缩略图的源代替。这是我现在的代码：

HTML

<figure class="single__cover">
    <img src="http://205.234.236.84/~garmanbu/wp-content/uploads/2014/04/CPML10248064.jpg" alt="" class="mainImg" />    
</figure>

<div class="single__gallery">

    <div class="grid-1 single__thumb">
        <a href="http://205.234.236.84/~garmanbu/wp-content/uploads/2014/04/kitchen1.jpg" rel="lightbox[gallery]">
        <img src="http://205.234.236.84/~garmanbu/wp-content/uploads/2014/04/kitchen1-260x180.jpg" class="attachment-thumbnail" />
        </a>
    </div>

    <div class="grid-1 single__thumb">
        <a href="http://205.234.236.84/~garmanbu/wp-content/uploads/2014/04/dinningroom.jpg" rel="lightbox[gallery]">
        <img src="http://205.234.236.84/~garmanbu/wp-content/uploads/2014/04/dinningroom-260x180.jpg" class="attachment-thumbnail" />
        </a>
    </div>

    <div class="grid-1 single__thumb">
        <a href="http://205.234.236.84/~garmanbu/wp-content/uploads/2014/04/livingroom.jpg" rel="lightbox[gallery]">
        <img src="http://205.234.236.84/~garmanbu/wp-content/uploads/2014/04/livingroom-260x180.jpg" class="attachment-thumbnail" />
        </a>
    </div>

    <div class="grid-1 single__thumb">
        <a href="http://205.234.236.84/~garmanbu/wp-content/uploads/2014/04/bedroom.jpg" rel="lightbox[gallery]">
        <img src="http://205.234.236.84/~garmanbu/wp-content/uploads/2014/04/bedroom-260x180.jpg" class="attachment-thumbnail" />
        </a>
    </div>

</div>

jquery的

<script>
jQuery(document).ready(function() {
    jQuery('.mainImg').each(function() {
        $(this).data("original", this.src);                
    });
    jQuery('.single__gallery a img').hover(function () {
        jQuery(this).closest('.single__main').find('.mainImg').attr("src", this.src);
    },function() {
        var $main = jQuery(this).closest('.single__main').find('.mainImg');
        $main.attr("src", $main.data("original"));
    });
});
</script>

到目前为止，当鼠标悬停在缩略图上时，我可以用缩略图源替换主（大）图像。

我想要做的是让主图像保留缩略图的来源，而不是在将鼠标移出缩略图时将其更改回原始图像源。

另外，我的缩略图被一个标签包围着。有没有办法使用a标签的href而不是使用缩略图中的源？

Answer 1

对于第一个问题，请使用mouseenter代替hover。对于第二个问题，请使用(this).closest('a')获取包含a，然后获取其href。

jQuery('.single__gallery a img').mouseenter(function() {
    jQuery(this).closest('.single__main').find('mainImg').attr('src', jQuery(this).closest('a').attr('href'));
});

Answer 2

您不必将状态存储在数据对象中。只需获取原始img srce的句柄，然后将mouseenter / mouseout链接在一起。查看此plunker以获取示例

使用jquery替换图像的来源

2 个答案: