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

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

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类。

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

如何使用data-attribute添加类？

1 个答案: