使用jquery修改HTML元素

Question

我想使用jquery根据变量的值（i）从<li>元素添加和删除类。

这里是什么，我至今http://jsfiddle.net/LX8yM/

点击“+”增量i 1做过的jsfiddle（我与Chrome的JavaScript控制台检查这一点）。

应该能够点击“+”，并且.active类应相应地从中删除并添加到<li>元素。

...我可以拿到第一<li>元接受类，这一切......

Answer 1

无需if语句：

$(document).ready(function(){ 
    $('#add').click(function(){ 
    $('.numbers .active').removeClass('active').next().addClass('active'); 
    }); 
}); 

jsfiddle

请注意，我向第一个列表项中添加了“活动”类。如果您无法控制标记，则可以通过JS始终执行此操作。

Answer 2

它被称为只有一次，而不是在点击事件函数。你捣鼓这个编辑工作：http://jsfiddle.net/LX8yM/2/

把它放在

'$('#add').click(function(){}' 

Answer 3

你的if..else ..挂在document.ready。将增量包裹在函数中并分别调用它。

像

$(document).ready(function(){  
    //variable 
    var i = 1; 

    //if statments 
    function incre(i){ // wrap into a function and process it 
    if(i == 1){ 
     $('#one').addClass('active'); 
     $('#two').removeClass('active'); 
     $('#three').removeClass('active'); 
    }else if(i == 2){ 
     $('#one').removeClass('active'); 
     $('#two').addClass('active'); 
     $('#three').removeClass('active'); 
    }else if(i == 3){ 
     $('#one').removeClass('active'); 
     $('#two').removeClass('active'); 
     $('#three').addClass('active'); 
    } 
    } 

    //change i 
    $('#add').click(function(){ 
     incre(i++); // pass it as a parameter 
    }); 

}); 

Working JSFiddle

Answer 4

这会更容易些：

$(document).ready(function(){ 
    var i = 0; // set the first value 
    $('#something').click(function(){ 
    i++; // every click this gets one higher. 

    // First remove class, wherever it is: 
    $('.classname').removeClass('classname'); 
     // Now add where you need it 
     if(i==1){ 
     $('#one').addClass('classname'); 
     } else if(i==2){ 
     $('#two').addClass('classname'); 
     } else if(i==3){ 
     $('#three').addClass('classname'); 
     } 
    }): 
}); 

Answer 5

看到这段代码。最初，您必须将课程添加到一个。

$(document).ready(function(){ 

    //variable 
    var i = 1; 
    $('#one').addClass('active'); 

    //if statments 


    //change i 
    $('#add').click(function(){ 
     i++; 
     if(i == 1){ 
     $('#one').addClass('active'); 
     $('#two').removeClass('active'); 
     $('#three').removeClass('active'); 
    }else if(i == 2){ 
     $('#one').removeClass('active'); 
     $('#two').addClass('active'); 
     $('#three').removeClass('active'); 
    }else if(i == 3){ 
     $('#one').removeClass('active'); 
     $('#two').removeClass('active'); 
     $('#three').addClass('active'); 
    } 
    }); 

});