jQuery ul li 给选定的 css答案

【问题标题】：jQuery ul li give css to selectedjQuery ul li 给选定的 css
【发布时间】：2021-11-25 14:36:12
【问题描述】：

我想给选中的任何一个 li 标签提供 css，但我卡在某个地方，你能帮忙吗？

按照我的代码： HTML

<ul class="product-categories">
  <li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
    <ul class="children">
      <li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
      <li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
    </ul>
  </li>
  
<br>

<li class="cat-item cat-item-21"><a href="#">Test</a></li>
 <br> 
  <li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
    <ul class="children">
      <li class="cat-item cat-item-39"><a href="#">Example</a></li>
    </ul>
  </li> 
</ul>

CSS

body{
width:180px;
}
a{
  text-decoration:none;
}


.selected{
  background-color:grey;
}

jQuery

let cat = jQuery('[class^=cat-item]');
jQuery(cat).each(function() {
    
    jQuery('.cat-item a').click(function(){

      jQuery('li .cat-item a').addClass('selected');
    });
   
});

https://jsfiddle.net/justfeel/gwo45pnu/17/

【问题讨论】：

你不需要在你的每一个中绑定你的点击（你拥有它的方式你多次绑定相同的东西）你的 html 也是无效的 - 你不能有一个 br 作为孩子一个 ul

标签： jquery

【解决方案1】：

要执行您需要的操作，请使用传递给事件处理程序的 Event 对象作为参数来引用被单击的元素。从那里您可以从所有其他元素中删除该类，同时将其添加到当前元素中。

另请注意，您的代码中还有一些其他问题：

jQuery 1.7 非常过时，需要更新。在此答案时，最新版本是 3.6
您不需要each() 电话。 jQuery 会自动将你调用的任何方法应用到集合中的每个元素（有一些在这里不相关的例外）
删除li 之间的<br /> 标记，因为它是无效的HTML。如果您想增加li 之间的边距，请使用 CSS。
您可以在 document.ready 事件处理程序中使用别名 jQuery，这样您的代码就不会那么冗长了。

说了这么多，试试这个：

jQuery($ => {
  let $a = $('.product-categories li a');
  $('.cat-item a').on('click', e => {  
    $a.removeClass('selected');
    $(e.target).addClass('selected');
  });
});

body { width: 180px; }
a { text-decoration: none; }
.selected { background-color: grey; }
.product-categories > li { margin-bottom: 1em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="product-categories">
  <li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
    <ul class="children">
      <li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
      <li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
    </ul>
  </li>
  <li class="cat-item cat-item-21"><a href="#">Test</a></li>
  <li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
    <ul class="children">
      <li class="cat-item cat-item-39"><a href="#">Example</a></li>
    </ul>
  </li>
</ul>

【讨论】：

非常感谢，我还有最后一个问题，当我点击a标签时，我会转到另一个页面。页面更改后是否仍然可以保留该类？
很遗憾，您需要在加载的新页面中突出显示选定的a 元素，而不是在原始页面中使用点击事件。您可以通过匹配 URL 来实现这一点 - 例如 this
我明白了，感谢您的关注。
没问题，很高兴为您提供帮助

【解决方案2】：

以下示例将解决您的问题。

    
    jQuery('.cat-item a').click(function(){
      jQuery('.cat-item a').removeClass('selected');
      jQuery(this).addClass('selected');
    });

body{
width:180px;
}
a{
  text-decoration:none;
}


.selected{
  background-color:grey;
}

<ul class="product-categories">
  <li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
    <ul class="children">
      <li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
      <li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
    </ul>
  </li>
  
<br>

<li class="cat-item cat-item-21"><a href="#">Test</a></li>
 <br> 
  <li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
    <ul class="children">
      <li class="cat-item cat-item-39"><a href="#">Example</a></li>
    </ul>
  </li> 
</ul>


<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

【讨论】：