Question

我有20多个缩略图，点击后，需要切换与点击的缩略图对应的内容。缩略图连续显示四行，切换的内容显示在行下方。缩略图还根据内容进行了分类，这些内容都通过PHP数组填充。切换的内容将具有与缩略图的类名完全相同的ID。

我的问题是，如何使用jQuery查找被点击元素的类名，然后使用该类名来查找要切换的正确元素？所以基本上，我想重新分配点击的对象的类名到要切换的对象的ID。

我的HTML标记：

<div class="wrapper">
  <div class="thumbnail object-one">...</div>
  <div class="thumbnail object-two">...</div>
  <div class="thumbnail object-three">...</div>
  <div class="thumbnail object-four">...</div>
</div>

<div id="object-one">...</div>
<div id="object-two">...</div>
<div id="object-three">...</div>
<div id="object-four">...</div>

使用这个JQ有效，但这是低效的，因为我有20多个这些坏男孩要切换：

$('.object-one').click(function(){
  $('#object-one').slideToggle();
});

$('.object-two').click(function(){
  $('#object-two').slideToggle();
});

etc...

Answer 1

<强> View demo

您正在使用匹配类，这可能没问题，但其他地方可能会添加或删除类或更改元素中类的顺序，因此您不应该依赖该字符串class="..."正确因此，无法使用它来识别您想要滑动的元素。但是，我们有data()我们可以用来告诉每个.thumbnail它应该针对哪个对象。

<div class="thumbnail" data-slide="object-one">...</div>

找到与数据幻灯片数据属性对应的id。

$('.thumbnail').click(function() {
    $('#' + $(this).data('slide')).slideToggle();
});

Answer 2

$('.thumbnail').click(function () {
    var get = $.grep(this.className.split(" "), function (v, i) {
        return v.indexOf('object-') === 0;
    }).join();
    $('#' + get).slideToggle();
});

<强> jsFiddle example

将基础功能归功于this question

Answer 3

这是一小撮jQuery。你是在处理通过CMS创建的PHP，比如Drupal还是Wordpress，这就是为什么你不得不在讨论课堂和ID时遇到麻烦？

如果没有，为什么不分两步进入并修复你的问题。

1。）编辑HTML

<div id="object-one" class="common-class">
<div id="object-two" class="common-class">
<div id="object-three" class="common-class">
...

2。）然后去编辑你的jQuery

$(".common-class").click(function() {
    // whatever code you'd like
})

-Cheers

使用jQuery / Javascript将单击对象的类名分配给要切换的对象的ID

3 个答案: