jquery - 在jquery中浏览列表的任何简单或更短的方法？

Question

基本上，我有 4 个列表。无论单击哪个列表，我都想添加一个类，如果单击了其他列表，我想从其他列表中删除该类。只想将其应用于已单击的那个。

  <script>
    $(document).ready(function(){
      $("#li1").click(function(){
            document.getElementById('li1').classList.add('focus');
            document.getElementById('li2').classList.remove('focus');
            document.getElementById('li3').classList.remove('focus');
            document.getElementById('li4').classList.remove('focus');
      });

      $("#li2").click(function(){
            document.getElementById('li2').classList.add('focus')
            document.getElementById('li1').classList.remove('focus');
            document.getElementById('li3').classList.remove('focus');
            document.getElementById('li4').classList.remove('focus');   
      });

      $("#li3").click(function(){
            document.getElementById('li3').classList.add('focus')
            document.getElementById('li1').classList.remove('focus');
            document.getElementById('li2').classList.remove('focus');
            document.getElementById('li4').classList.remove('focus');   
      });

      $("#li4").click(function(){
            document.getElementById('li4').classList.add('focus')
            document.getElementById('li1').classList.remove('focus');
            document.getElementById('li2').classList.remove('focus');
            document.getElementById('li3').classList.remove('focus');   
      });


    });
</script>


    ---HTML----
    <ul>
         <li id="li1"> some text here </li>
         <li id="li2"> some text here </li>
         <li id="li3"> some text here </li>
         <li id="li4"> some text here </li>
    </ul>

Answer 1

$('li').click(function(event){
  $('li').removeClass('focus');
  $(event.target).addClass('focus');
})

这将删除所有“焦点”类，然后将其添加到单击的 li。

更多阅读： http ://api.jquery.com/event.target/

Answer 2

您可以尝试这样的事情（DEMO）

HTML：

<ul id="list1">
    <li class='current'>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul id="list2">
    <li class='current'>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

JS::

$('#list1 > li').add('#list2 > li').on('click', function(){
    $(this).siblings().removeClass('current');
    $(this).addClass('current');
});

或者，也许这个（演示）

$('#list1 > li').add('#list2 > li').on('click', function(){
    $('ul[id^="list"] > li').siblings().removeClass('current');
    $(this).addClass('current');
});

Answer 3

没有看到你的标记：

var $lists = $('[id^="li"]');

$lists.click(function(){
  $lists.removeClass('focus');
  $(this).addClass('focus');
});