Question

我尝试在用户点击具有特定ID的li时添加特定类，我尝试在li点击之前删除所有其他类，并为此li添加特定类，例如用户点击在带有id 1的li中，asigned类是一个，如果用户在id中点击li，则class add为2并删除之前的class one等等。我的代码如下所示：

<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

在这个例子中你可以使用一些 vanilla 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
    }
});

如何在jquery中将特定的类添加到特定的id

4 个答案:

DEMO