javascript - 确定单击了哪个元素并有条件地选择调用哪个方法

Question

我正在尝试使用 JQuery 将 3 个缩略图制作成按钮，每个按钮都会打开自己的页面元素，其中包含有关图片的详细信息。

   现在我已经成功地做到了，当单击任何缩略图(来自“缩略图”类)时，任何缩略图都会导致页面元素(“描述”类)滚动打开和关闭。

如何检查单击了哪个缩略图，以便我可以打开与该特定缩略图相对应的不同描述？ (这就是我试图用“选择”做的事情)。

var main = function() {
  $('.thumbnail').click(function(select) {      
    var description = $('.game-descriptions').children('.description');     
    if( description.is(":hidden")) {
        description.slideDown("slow");
    }
    else
        description.hide();    
  });   
}

$(document).ready(main);

Answer 1

使用数据属性指定缩略图点击的目标，例如:data-target="#game-1"，将 ID 添加到匹配的描述中并使用data()使用 #game-1 jQuery 选择器的属性值。

这是一个demo

JS

$('.thumbnail').click(function() {

    var gameId = $(this).data('target');

    $(gameId).slideToggle().siblings(':visible').slideToggle();

});

HTML

<img class="thumbnail" data-target="#game-1" />    
<img class="thumbnail" data-target="#game-2" />

<div class="game-descriptions">
    <div id="game-1" class="description"></div>
    <div id="game-2" class="description"></div>
</div>

任何切换，如 toggle()、slideToggle()、fadeToggle() 都会处理隐藏或可见