javascript - 单击时的 Jquery 类选择器

Question

嗨，我在点击时使用选择类，虽然它工作正常，但对我来说这是一个漫长的过程，谁能告诉我简单而简短的过程，我的代码如下所示

    <script type="text/javascript">
       $(document).ready(function() { 
           $("#menu-item1").click(function() {
              $('#menu-item1').addClass('li_select');
              $('#menu-item2').removeClass('li_select');
              $('#menu-item3').removeClass('li_select');
              $('#menu-item4').removeClass('li_select');
        });

           $("#menu-item2").click(function() {
              $('#menu-item1').removeClass('li_select');
              $('#menu-item2').addClass('li_select');
              $('#menu-item3').removeClass('li_select');
              $('#menu-item4').removeClass('li_select');
        });

           $("#menu-item3").click(function() {
              $('#menu-item1').removeClass('li_select');
              $('#menu-item2').removeClass('li_select');
              $('#menu-item3').addClass('li_select');
              $('#menu-item4').removeClass('li_select');
        });


           $("#menu-item4").click(function() {
              $('#menu-item1').removeClass('li_select');
              $('#menu-item2').removeClass('li_select');
              $('#menu-item3').removeClass('li_select');
              $('#menu-item4').addClass('li_select');
        });

      });
    </script>

Answer 1

你可以这样做：

$(document).ready(function () {
    var $menu = $("[id^='menu-item'");
    $menu.click(function () {
        $menu.removeClass('li_select');
        $(this).addClass('li_select');
    });
});

Answer 2

palash 的答案的替代方案可能是这样的（我想更具体一点）：

$(document).ready(function() {
    //define all your elements
    var items = $('#menu-item1,#menu-item2,#menu-item3,#menu-item4');
    //remove the class onclick from all items, 
    //and then apply it to the element that was clicked.
    items.click(function() {
        items.removeClass('li_select');
        $(this).addClass('li_select');
    });
});

Answer 3

请检查链接http://jsfiddle.net/G49SQ/ ..

HTML：

<ul id="menu-item">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>

JS：

$(document).on("click","#menu-item li",function(){
    $("#menu-item").find("li").removeClass('li_select');
    $(this).addClass('li_select');
});