Jquery 每个 toggleClass

Question

因此，我正在使用在菜单中生成 "li's" 的 foreach。目前只有两个"li's"。当你点击一个按钮时，这个菜单会变得更细，我想在这种情况下减小字体大小。

我试过在 each() 函数中使用 toggleClass() 函数来执行此操作，但只有第一个 "li" 切换 class，第二个保持不变。

foreach ($results as $result){
                       $local = $result['local'];
                   echo "<li><a class='clsPostData1' data-local='".$result['local']."' data-salaid='".$result['salaid']."' data-salakey='".$result['salakey']."'href='#'><span id='idfontsala'>".$local."</span></a></li>";
                   }

我在跨度内使用 "idfontsala" ID。

<script>

      $(document).ready(function(){
  $('.sidebar-toggle').click(function(){
    $('#idfontsala').each(function(){
      $(this).toggleClass('classfontsala');
    });
  });
});

  </script>

这是正在发生的事情：https://i.imgsafe.org/34d4f934b5.png

Answer 1

如果您希望所有生成的项目都受到影响。使用 class 匹配多个元素。将您的标记替换为：

 <span class='fontsala'>

还有你的脚本：

 $('.fontsala').each(function(){
  $(this).toggleClass('classfontsala');
});

更新：

如果您仍想使用 $.each，请这样做。但是正如@Barmar所说，它可以缩短。

$('.fontsala').toggleClass('classfontsala');

Jquery 每个 toggleClass

Jquery each toggleClass

each

jquery

toggleclass