Вычеркивание элементов списка на jquery

248

29 марта 2018, 07:54

Решил попробовать сделать простую todoшку для самообучения. Столкнулся с такой проблемой - элементы списка имеют одинаковый класс или id. Из за чего в первом случае при вычеркивании одного элемента вычёркиваются все, а во втором вычёркивается только первый.

https://jsfiddle.net/brachkoff/1gpo2hr3/4/ - вариант с id

$('#task__checkbox').click(function() {
  if ($('#task__checkbox').prop('checked') == true) {
    $('#task__text').css('text-decoration', 'line-through')
  }
  if ($('#task__checkbox').prop('checked') == false) {
    $('#task__text').css('text-decoration', 'none')
  }
})

Как сделать так чтобы все работало нормально, при этом не создавая отдельный id для каждого элемента списка?

Answer 1

$('#list').on('click', '.task__checkbox', function() { 
  $(this).closest(".task").find('.task__text'). 
    css('text-decoration', this.checked ? 'line-through' : 'none'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="todo"> 
  <div id="header"> 
    <h1>ToDo</h1> 
  </div> 
  <hr> 
  <ul id="list"> 
    <li class="task"> 
     <input type="checkbox" class="task__checkbox"> 
     <span class="task__text" contenteditable="true">Тут еще что то</span> 
    </li> 
    <li class="task"> 
      <input type="checkbox" class="task__checkbox"> 
      <span class="task__text" contenteditable="true">Еще какие то буквы</span> 
    </li> 
    <li class="task"> 
      <input type="checkbox" class="task__checkbox"> 
      <span class="task__text" contenteditable="true">Слова слова слова</span> 
    </li> 
  </ul> 
  <hr> 
</div>

Answer 2

Такие вещи без js делаются. P.S. одинаковых id на странице быть не должно.

$('button').click(function(){ 
  $('body').append('<label><input type="checkbox"><span>new task</span></label>'); 
})

label{ 
  display:block; 
  margin:0 0 .5em; 
} 
label :checked + span{ 
  text-decoration:line-through; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Добавить еще</button> 
<label> 
  <input type="checkbox"> 
  <span>lorem ispum dolor</span> 
</label> 
<label> 
  <input type="checkbox"> 
  <span>lorem ispum dolor</span> 
</label> 
<label> 
  <input type="checkbox"> 
  <span>lorem ispum dolor</span> 
</label> 
<label> 
  <input type="checkbox"> 
  <span>lorem ispum dolor</span> 
</label>