Javascript 通过单击将css类附加到多个div

我有一个菜单，可以在包含内容的div容器上触发CSS3转换。 通过单击菜单链接（无重新加载），它旁边的跨度类应该被读出并复制到div上

因此，例如，通过单击“公司”，菜单中链接旁边的跨度类“show right”应应用于id=“cube”的所有3个div，并且类“show front”将被覆盖

jsfiddle：

我的问题是，我的函数只应用它在所有跨距和端点中找到的第一个类。如何将每个类应用于多维数据集div

HTML

<nav class="menu">
<ul>
    <li class="current"><span class="show-front"></span><a class="home menu-link" href="#home">Home</a></li>
    <li><span class="show-right"></span><a class="company menu-link" href="#unternehmen">Company</a></li>
    <li><span class="show-left"></span><a class="service menu-link" href="#service">Service</a></li>
    <li><span class="show-back"></span><a class="services menu-link" href="#services">Contact</a></li>
</ul>
</nav>
  <section class="cube-wrapper">
    <div id="cube" class="show-front">
      <figure class="front">1</figure>
      <figure class="back">2</figure>
      <figure class="right">3</figure>
      <figure class="left">4</figure>
    </div>
  </section>
  <section class="cube-wrapper">
    <div id="cube" class="show-front">
      <figure class="front">1</figure>
      <figure class="back">2</figure>
      <figure class="right">3</figure>
      <figure class="left">4</figure>
    </div>
  </section>
  <section class="cube-wrapper">
    <div id="cube" class="show-front">
      <figure class="front">1</figure>
      <figure class="back">2</figure>
      <figure class="right">3</figure>
      <figure class="left">4</figure>
    </div>
  </section>

试试这个，因为“.cube wrapper”将返回1个以上的元素，所以应该使用.each（）来循环它

$('.cube-wrapper').each(function()
{
    $(this).children().attr('class', (linksource.attr('class')));
});

---

并且ID在整个html文件中必须是唯一的，所以您不应该多次使用ID=“cube”

这应该可以做到：

$(".menu li a").click(function(){
    var clazz = $(this).data("class");
    $(".section-wrapper .cube").each(function(){
        $(this).removeClass().addClass("cube").addClass(clazz);
    });
});

我删除了重复的

id

s并将多维数据集添加为一个类 而不是

span

s（它们无缘无故地躺在那里），我为

class

名称使用了

data

属性

参考

---

多个ID！！！使用

class

instead我使用ID来防止被my函数覆盖。通过从跨度复制类，多维数据集类将被覆盖，这不是我想要的。因此我使用ID。啊，数据属性更舒适-好主意！谢谢！

$(".menu li a").click(function(){
    var clazz = $(this).data("class");
    $(".section-wrapper .cube").each(function(){
        $(this).removeClass().addClass("cube").addClass(clazz);
    });
});