如何添加具有数据属性的类？

Question

我正在处理一些数据按钮，但无法弄清楚如何使该功能正常工作。 我正在尝试通过数据属性和相应的ID向元素添加类。 然后，我想使用主题内部的按钮停止事件传播。

到目前为止，这就是我所拥有的：

HTML：

<div class ="subject" id="subject1">
    <button class="remove">Remove</button>
    The Subject
</div>
<div class ="subject"  id="subject2">
    <button class="remove">Remove</button>
    The Subject 2
</div>
<div class ="subject" id="subject3">
    <button class="remove">Remove</button>
    The Subject
</div>

<button class="trigger" data-subject="subject1">Trigger</button>
<button class="trigger" data-subject="subject2">Trigger</button>
<button class="trigger" data-subject="subject3">Trigger</button>

CSS：

.active {
    color:red
}

JS：

var subject = document.querySelector('.subject');
var trigger = document.querySelector('.trigger');
var remove = subject.querySelector('.close');
var data = trigger.getAttribute("data-subject");

var datajs = (function () {

    function init() {

    [].forEach.call(trigger),function(btn) {
    btn.onclick = function() {this.classList.add("active");}

    });

     remove.addEventListener('click', function (ev) {
     ev.stopPropagation();
     removeModalHandler();
    });
 });
     }

    init();

})();

这是一个小提琴： http : //jsfiddle.net/tNS62/1/

您可能会看到，我的JS并不是那么出色。

Answer 1

试试这个 。 首先，我们选择所有按钮：

var triggers = document.querySelectorAll('.trigger');
var removes = document.querySelectorAll('.remove');

然后，将行为应用于每个按钮：

for (var i =0; i < triggers.length; i++) {
    var btn = triggers[i];
    btn.addEventListener('click', function () {
        var id = this.dataset.subject;
        document.querySelector('#' + id).classList.toggle('active');    
    }, false);
}

使用dataset获取附加的ID，然后搜索相应的元素以切换active类。

我为删除按钮做了同样的事情。