dojo - 说我有很多 div，每个 div 在点击时都会触发一个事件

Question

Dojo 1.7 说我有很多 div，每个 div 在单击时都会触发一个事件。所以当我 cilck 一个 div 时，dojo 会添加一个类，对 div 说“点击”。但是我该如何设置它，以便当我单击另一个 div 时，它会删除上一个“单击”的 div 类并将其提供给我刚刚单击的 div？这是因为如果我单击一个 div，它应该更改其背景并从先前单击的 div 中删除背景谢谢！！！

Answer 1

例如，您可以将所有这些 div 放在一个容器中

<div class='RadioDivContainer'>

  <div> </div>
  ....
  <div>  </div>

<div>

然后在 div 的 onclick 事件处理程序中执行此操作：

dojo.query(".RadioDivContainer .clicked").forEach(function(node){
     dojo.removeClass(node, "clicked");
}); 

dojo.addClass(evt.target, "clicked");

这只是展示如何实现它的想法。您可以更改它以适合您的情况。

Answer 2

您应该使用 启用对所需 DOM 元素的钩子，dojo.query使用 处理单击事件dojo.on并使用 分配/取消分配类dojo/dom-class。给div元素一个共享类来表示它们是这个可点击单元的一部分，然后监听所有元素的点击事件并根据需要分配类。请参阅此JSfiddle，使用Dojo 1.7.4：

HTML

<div class="mutable"></div>
<div class="mutable"></div>
<div class="mutable"></div>

Javascript/道场

require(["dojo/query", "dojo/dom-class", "dojo/on", "dojo/domReady!"], function(query, domClass, on) {
    on(query(".mutable"), "click", function(e) {
        query(".mutable").forEach(function(node) {
            domClass.remove(node, "clicked");
        });
        domClass.add(this, "clicked")
    });
});

CSS

.mutable {
    background-color:red;
}

.clicked {
    background-color:green;
}

div {
    border:2px solid black;
    margin:5px;

}

这也适用于 Dojo 1.8.x 和 1.9.x。

Answer 3

在将类应用于新单击的元素之前，您可以clicked从组中的所有元素中删除该类。clicked

使用 Dojo 1.7：

require([
    'dojo/query',
    'dojo/dom-class',
    'dojo/on',
    'dojo/dom',
    'dojo/domReady!'
], function(query, dom_class, on, dom) {
    var boxes = query('.box', dom.byId('#container')); // get elements inside #container
    boxes.forEach(function(box) {
        on(box, 'click', function() {
            boxes.forEach(function(b) {
               dom_class.remove(b, 'clicked'); 
            });
            dom_class.add(box, 'clicked');
        });
    });
});

这是一个小提琴。

您还可以跟踪最后单击的元素并clicked从中删除类。您可以在小提琴中看到这两个示例。