2015-06-07 5 views
0

Можно ли снять задание после его проверки? если я проверю задачу, она станет красной в строке, но я хочу снова щелкнуть ее, а затем вернуться к нормальной.снимите флажок, чтобы сделать элемент javascript

Есть ли простой способ заполнить это?

JS

var takenLijst = document.getElementById('takenLijst'); 

var invulVeld = document.getElementById('invulVeld'); 

var voegToe = document.getElementById('voegToe'); 

var verwijderLijst = document.getElementById('verwijder'); 

var list = [];               

voegToe.addEventListener('click', function() {       
    event.preventDefault();            

    takenLijst.innerHTML = ''; 

    if (invulVeld.value !== '') {          
    list.push(invulVeld.value);           
    invulVeld.value = ''; 
    } 

    for (var i=0; i < list.length; i++) { 
    takenLijst.innerHTML += '<li>' + list[i] + '</li>'; 
    } 

    invulVeld.focus();             
}); 


takenLijst.addEventListener('click', function() {      
    var taak = event.target; 
    if (taak.tagName === 'LI') {           
     taak.className = "checked";          
    } 
}); 

verwijderLijst.addEventListener('click', function() {     
    list.length = 0;              
    takenLijst.innerHTML = ''; 
}); 

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>To do list</title> 

    <link rel="stylesheet" type="text/css" href="/css/ToDo.css"> 
</head> 
<body> 

    <form> 
     <input type="text" id="invulVeld"/><button id="voegToe">Taak</button><button id="verwijderLijst">Verwijder lijst</button> 
    </form> 

    <ul id="takenLijst"> 

    </ul> 

    <script src="js/ToDo.js"></script> 

</body> 
</html> 
+0

Подсказка. Простым способом является использование .toggleClass() в jquery. Объявите подходящий класс css для его красной и вычеркнутой ... затем в вашем коде jquery добавьте обработчик событий в свой флажок, проверьте, установлен ли он или нет, затем переключите класс, если флажок установлен или нет. , Или, если вы хотите использовать метод Vanilla JS, используйте .classList.remove() или .classList.add() для управления классом –

ответ

0

Просто проверьте, если проверил класс уже установлен и удалите его.

takenLijst.addEventListener('click', function() {      
    var taak = event.target; 
    if (taak.tagName !== 'LI') 
     return; 

    if(taak.className == "checked") { 
     taak.className = ""; 
    } else { 
     taak.className = "checked"; 
    } 
}); 
Смежные вопросы