确定单击了哪个元素，并有条件地选择要调用的方法
确定单击了哪个元素，并有条件地选择要调用的方法
提问于 2014-09-01 20:38:14
我试图使用JQuery将3个缩略图制作成按钮，每个按钮都打开自己的页面元素，并提供有关图片的详细信息。
现在我已经成功地将缩略图制作成任意的缩略图，当单击任何缩略图(来自“缩略图”)时，任何缩略图都会导致页面元素(类"description")滚动打开和关闭。
如何检查单击哪个缩略图，以便打开与该特定缩略图对应的不同描述？(这就是我试图用“select”来做的)。
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);回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-01 20:46:54
使用数据属性指定缩略图click的目标是什么，例如：data-target="#game-1"，将is添加到匹配的描述中，并使用数据()来使用#game-1的jQuery选择器的属性值。
这是一个演示
JS
$('.thumbnail').click(function() {
var gameId = $(this).data('target');
$(gameId).slideToggle().siblings(':visible').slideToggle();
});<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
Stack Overflow用户
发布于 2014-09-01 20:52:30
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语句，因为您拥有的逻辑相当于它所做的事情(即切换对象可见性)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25615944
复制相关文章
相似问题
在ApacheJ测量仪中执行基于Java的Selenium WebDriver测试
如何解决ApacheJ测量仪安装错误？
如何在PKS (枢轴-容器-服务)上安装ApacheJ测量仪
用j测量仪进行特征测试
如何用JPOS库对外围设备进行测试和仿真
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
