Question

我试图在两张图片之间切换并遇到麻烦，

这是我的Jquery：

$( ".games li" ).hover(
    function() {
        $( this ).append( $( "<div id='img-toggle'><img class='favorite-not-banner' src='img/fav-not-saved.png' title='Add to favorites'><img class='favorite-banner' src='img/fav-saved.png' title='Remove from favorites'></div>" + "<a href='details.html'><p class='details'>View Details</p></a>").hide().fadeIn(600));
    }, function() {
        $( this ).find( ".favorite-banner" ).fadeOut(100);
        $( this ).find( ".details" ).fadeOut(100);
    }
);

$("#img-toggle").click(function() {
    $(this).find('img').toggle();
});

这是我的两个班级的CSS：

.favorite-banner{
    bottom:58%;
    position:absolute;
    height:170px;
    right:60%;
}

.favorite-not-banner{
    bottom:58%;
    position:absolute;
    height:170px;
    right:60%;
    display:none;
 }

任何帮助将不胜感激。提前谢谢！

Answer 1

由于id是唯一的，因此您需要为附加的div使用课程而不是id：

$( this ).append( $( "<div class='img-toggle'><img class='favorite-not-banner' src='img/fav-not-saved.png title='Add to favorites'><img class='favorite-banner' src='img/fav-saved.png' title='Remove from favorites'></div>" + "<a href='details.html'><p class='details'>View Details</p></a>").hide().fadeIn(600));

此外，由于您的div是动态生成的，因此您需要使用 event delegation ：

$('body').on('click','.img-toggle',function() {
    $(this).find('img').toggle();
});

事件委派将帮助您将click事件附加到这些新添加的.img-toggle元素。

我试图在两个用jquery悬停的图像之间切换

1 个答案: