Изменение HTML-элементов с помощью jquery

Question

Я пытаюсь использовать jquery для добавления и удаления класса из <li> элементов в соответствии со значением переменной (i).

Вот jsfiddle того, что я сделал до сих пор http://jsfiddle.net/LX8yM/

нажав на кнопку «+» приращения i от 1 (я проверил это с помощью консоли JavaScript в Chrome).

Следует иметь возможность нажать «+», и класс .active должен быть удален и добавлен к соответствующим элементам <li>.

... Я могу получить первый элемент <li> принять класс, это все ...

Answer 1

Нет необходимости в если заявления:

$(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'); 
    } 
    }); 

});