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

Question

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

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

jsfiddle:

http://jsfiddle.net/L98yr7b0/7/

我遇到的问题是我的函数只应用它在所有范围和端点中找到的第一个类。我怎样才能让每个类都应用于立方体 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>

JS

  $('.menu-link').bind('click', function(e) {
      e.preventDefault();
      var linksource = $('.menu ul li').children('span');
      $('.cube-wrapper').children().attr('class', (linksource.attr('class')));


      console.log($('.menu ul li').children('span'));
      console.log($('.menu ul li').children().attr('class'));
  });

Answer 1

应该这样做: DEMO

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

我删除了重复的 id 并添加了 cube 作为一个类而不是 spans(无缘无故地躺在那里)，我使用 data 属性作为 class 名称。

引用

http://api.jquery.com/each/

http://api.jquery.com/removeclass/

http://api.jquery.com/addclass/