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

Determining which element was clicked and conditionally choosing which method to call

本文关键字：选择 有条件 调用 方法 单击 元素      更新时间：2023-09-26

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

 nbsp 现在我已经成功地做到了，当点击任何缩略图（来自类"缩略图"）时，任何缩略图都会导致（类"描述"的）页面元素滚动打开和关闭。

如何检查单击了哪个缩略图，以便打开与该特定缩略图对应的不同描述？（这就是我试图用"选择"来做的）。

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

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

这是演示

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()这样的切换都会处理is hidden或is visible

jsFiddle

click函数的参数是一个jQuery事件对象，它可以用于添加一些事件处理逻辑。然而，在处理程序的上下文中，this指的是触发点击事件的元素，并且通常对于任何目标逻辑都足够。

例如，假设缩略图和描述具有类似名称的ID，您可以执行以下操作：

$(function () {
    $('.thumbnail').click(function (event) {
        var descId = this.id.replace("thumb", "desc");
        var description = $('.game-descriptions').children('#' + descId);
        // or simply $("#" + descId);
        description.toggle("slow");
    });
});

HTML

<div>
    <div class="thumbnail" id="thumb-1">Thumb 1</div>
    <div class="thumbnail" id="thumb-2">Thumb 2</div>
    <div class="thumbnail" id="thumb-3">Thumb 3</div>
</div>
<div class="game-descriptions">
    <div class="description" id="desc-1">Description One</div>
    <div class="description" id="desc-2">Description Two</div>
    <div class="description" id="desc-3">Description Three</div>
</div>

然而，针对正确"描述"的技术将取决于实际的DOM结构。

还要注意，我用toggle方法代替了if语句，因为您所拥有的逻辑与它所做的等效（即切换对象可见性）。

相关文章：