Question

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

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

的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>

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 作为类而不是span s（它们无缘无故地躺在那里），我使用data属性作为class名称。

<强>参见

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

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

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

Answer 2

试试这个，因为“.cube-wrapper”将返回多个元素，你应该使用.each（）来循环它

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

ID在整个html文件中必须是唯一的，因此不应多次使用id =“cube”。

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

2 个答案: