Question

Dojo 1.7 说我有很多div，每个div在点击时触发一个事件。所以当我把一个div变成cilck时，dojo会添加一个类，对div说“点击”。但是我如何设置它以便当我单击另一个div时，它会删除之前的div类“clicked”并将其提供给我刚刚单击的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

您应使用dojo.query启用所需DOM元素的挂钩，使用dojo.on处理点击事件，并使用dojo/dom-class指定/取消指定类。为div元素提供一个共享类，以表示它们是此可单击单元的一部分，然后监听所有这些单元上的单击事件并根据需要分配类。使用 Dojo 1.7.4 查看 JSfiddle ：

<强> 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');
        });
    });
});

Here's a fiddle

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

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

3 个答案: