使用 jQuery 将唯一的类添加到类似的类组答案

【问题标题】：Adding unique classes to similar class groups with jQuery使用 jQuery 将唯一的类添加到类似的类组
【发布时间】：2021-03-25 12:02:52
【问题描述】：

我正在尝试制作产品类别的折叠侧边栏。通过使用 woocommerce 产品类别小部件和一些代码（无需对显示所有类别和子类别的侧边栏进行编码）。我实现了制作一个可折叠的侧边栏，但是当我单击一个主要类别时 - 一次打开所有类别并显示所有子类别。

我没有找到一种方法给每个子类别组一个仅使用 jQuery 的唯一类 - 所有由 woocommerce 默认调用称为“children”。

(function($) {  
    $(document).ready(function() {
        $("li.cat-item-22").click(function() {
            $('ul.children').slideToggle();
        });
    
        $("li.cat-item-29").click(function() {
            $('ul.children').slideToggle();
        });
    
        $("li.cat-item-30").click(function() {
            $('ul.children').slideToggle();
        });
    
        $("li.cat-item-40").click(function() {
            $('ul.children').slideToggle();
        });
    
        $("li.cat-item-43").click(function() {
            $('ul.children').slideToggle();
        });
    
        $("li.cat-item-55").click(function() {
            $('ul.children').slideToggle();
        });
     
        $("li.cat-item-61").click(function() {
            $('ul.children').slideToggle();
        });
    });
})(jQuery);

【问题讨论】：

标签： jquery woocommerce sidebar

【解决方案1】：

它终于与下面的函数一起工作了——这样我就可以给每个“孩子”类一个唯一的 ID 来解决我的问题。

(function($){

$('ul.children').each(function(a,b,c,d,e,f,g){
$(this).attr('id',$(this).attr('class')+a)
})
console.log($('body').html());

【讨论】：

【解决方案2】：

你必须使用属性选择器来获取你的对象

$("li[class^='cat-item-'],li[class*='cat-item-']")

https://api.jquery.com/attribute-starts-with-selector/

然后使用 $(this) 通过点击事件来引用你当前的对象

$(document).ready(function() {

  $("li[class^='cat-item-'],li[class*='cat-item-']").click(function() {
    $(this).find('ul.children').slideToggle();
  });

});

.children { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="cat-item-22">
    Test in li.cat-item-22
    <ul class="children">
      <li>Test in ul.children</li>
    </ul>
  </li>
</ul>
<ul>
  <li class="cat-item-24">
    Test in li.cat-item-24
    <ul class="children">
      <li>Test in ul.children</li>
    </ul>
  </li>
</ul>

【讨论】：