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(); 
}); 

事件代表團將幫助您將點擊事件附加到這些新添加的.img-toggle元素。