通过javascript将DOM样式添加到DOM元素

Question

我正在尝试在附加到javascript方法的事件上切换DOM元素的不透明度。点击复选框即可触发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>  

但没有任何反应。如何通过javascript将DOM添加到DOM元素？

Answer 1

使用jQuery添加类时，不需要前缀.：

task.addClass('toggle');

此外，您的功能似乎略有偏差：

如果您想全局选择.action

，则要么使用此功能

var task = $('.actions');

或者，如果它应该是当前this对象的子节点：

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