Добавить стиль CSS в элемент DOM с помощью javascript

Question

Я пытаюсь переключить непрозрачность элемента DOM на событие, которое связано с javascript-методом. Щелчок на флажке - это то, что вызывает метод completed.

Ниже метод вызывается по клику:

completed: function(){ 
       var task = this.$('.actions'); 

       console.log(task); 

       if(!task.hasClass('toggle')){ 

        task.addClass('toggle'); 
       } else { 
        task.removeClass('toggle'); 
       } 

       } 
      } 

CSS- .toggle{ opacity: 0.4; }

и HTML (подчеркнет шаблон, в данном случае) является

 <div class="table table-bordered"> 
      <div class="actions"> 
       <input type="checkbox" class='completed'> 
       <button type='button' class='delete btn btn-danger btn-xs'> x </button> 
       <button type='button' class='edit btn btn-primary btn-xs' id='actions'> edit </button> 
       <span style='font-weight:bold' class="word" spellcheck='false'> <%= task %>-</span> 
       <span class="definition" spellcheck='false'> <%= description %> </span> 
      </div> 
     </div> 

Но ничего не происходит , Как я могу добавитьClass в элемент DOM через javascript?

Answer 1

При добавлении класса с помощью JQuery, вам не нужен префикс .:

task.addClass('toggle'); 

Кроме того, ваша функция, кажется, немного от:

Вы либо хотите использовать это, когда вы хотите выбрать .action глобально

var task = $('.actions'); 

или это, если он должен быть childnode текущего this объекта:

var task = $(this).find('.actions');