如何在jQuery中向特定ID添加特定类

Question

我尝试在用户单击具有特定ID的li时添加特定的类，尝试在li单击之前删除所有其他类并向此li添加特定的类，例如，如果用户单击li id 1分配的类为1，如果用户单击li并输入id 2，则类添加为2并删除先前的类1，依此类推。等等。我的代码如下所示：

<ul class="menu-primary">

    <li id="1"><a href="#">Index</a></li>
    <li id="2" ><a href="#">Other</a></li>
    <li id="3"><a  href="#">Thats why</a></li>
    <li id="4"><a id="3" href="#">Sports</a></li>
    <li id="5"><a id="4" href="#">Clients</a></li>
    <li id="6"><a id="5" href="#">Things about history</a></li>
    <li id="7"><a href="#">Contact</a></li>

</ul>

jQuery看起来像这样：

$(document).ready(function() {
if($('.menu-primary #1').hasClass('one')){
   $('.menu-primary #1').removeClass('one')
}else{
  $('.menu-primary #1').addClass('one')
}

if($('.menu-primary #2').hasClass('dos')){
   $('.menu-primary #2').removeClass('dos')
}else{
  $('.menu-primary #2').addClass('dos')
}

if($('.menu-primary #3').hasClass('three')){
   $('.menu-primary #3').removeClass('three')
}else{
  $('.menu-primary #3').addClass('three')
}

if($('.menu-primary #4').hasClass('four')){
   $('.menu-primary #4').removeClass('four')
}else{
  $('.menu-primary #4').addClass('four')
}

if($('.menu-primary #5').hasClass('five')){
   $('.menu-primary #5').removeClass('five')
}else{
  $('.menu-primary #5').addClass('five')
}

if($('.menu-primary #6').hasClass('six')){
   $('.menu-primary #6').removeClass('six')
}else{
  $('.menu-primary #6').addClass('six')
}

if($('.menu-primary #7').hasClass('seven')){
   $('.menu-primary #7').removeClass('seven')
}else{
  $('.menu-primary #7').addClass('seven')
}

});

谢谢您的帮助。

Answer 1

在我从li删除属性Class并添加新类之后，需要在li上添加处理程序

$('.menu-primary li').click(function(){
       $('.menu-primary li').removeAttr("class");
       if($(this).attr("id")=="1"){
          $(this).addClass("one");
       }
       if($(this).attr("id")=="2"){
          $(this).addClass("two");
       }
       if($(this).attr("id")=="3"){
          $(this).addClass("three");
       }
    });

http://jsfiddle.net/lTasty/kLm1fb0v/

Answer 2

我相信这就是您想要的，而不是对if语句进行硬编码，而只是尝试为标记中的元素添加data并继续执行此代码。

var menu = $('.menu-primary li').click(function () {
    menu.not($(this).toggleClass($(this).data("class"))).removeClass();
});

DEMO

Answer 3

这是一个例子：

$("#my_id").addClass('active');

这就是你需要的吗？

Answer 4

您可以在这种情况下使用一些普通的 javascript：

var nums = ['zero','one','two','three'];

$('.menu-primary li').click(function(){
    if( nums[parseInt(this.id)].length ){ // verifies class exists
        this.className = nums[parseInt(this.id)]; // completely overwrites class
    }
});