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

我有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>

您使用的是匹配类，这是可以的，但是其他地方可能会添加或删除类或更改元素中类的顺序，因此您不应该依赖字符串

class=“…”

是正确的，因此不能使用它来标识要滑动的元素。但是，我们有

data（）

，我们可以用它来告诉每个.缩略图它应该指向哪个对象

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

---

将基础函数归功于

，这只是jQuery的一小部分。您是否正在处理通过CMS（如Drupal或Wordpress）创建的PHP，这就是为什么您必须以某种方式调用类和ID

如果不是，为什么不分两步解决你的问题呢

1.）编辑您的HTML

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

---

-干杯

摇滚明星！工作完美。我知道这很简单。谢谢你朝着正确的方向努力。时间一到就会标记为答案。不，我写的是PHP。“类名”基于我通过多维数组传递的团队成员名称。我清理名称并添加破折号以将其转换为类/ID名称。我不能仅仅使用一个普通类来切换所有内容，因为我正在切换不同的内容。这无助于解决问题。您刚才解释了如何将一个函数应用于几个元素，但没有说明如何设置每个元素，使它们都可以专门针对另一个元素。这就是为什么我问他使用的是什么。在使用CMS时遇到这种障碍是正常的。现在知道情况并非如此，那么使用正则表达式作为jQuery的解决方案呢？筛选所需的类，然后将其应用于相应的ID。唯一的缺点是正则表达式的性能受到了冲击

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

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

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

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