gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 11:55:58 25 4
gpt4 key购买 nike

我正在尝试使用 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);

最佳答案

使用数据属性指定缩略图点击的目标,例如: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() 都会处理隐藏可见

关于javascript - 确定单击了哪个元素并有条件地选择调用哪个方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25615944/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com