如何使用 dojo amd 添加 onclick 事件以突出显示？

Question

我是 dojo 的新手。我怎样才能使用 Dojo AMD 来弄清楚如何单击 "oddF button" 我可以对于 class 为 "odd" 的每个节点，我想删除 class "blue" 并添加 class "red"

    <!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Demo: Refresh a Node's Content</title>
           <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css" media="screen">

           <style>
                .highlight {
                    background-color: yellow;
                }

                h3.condition {
                    border-top: 1px solid black;
                    padding:1em 0 !important;
                }

           </style>



</head>
<body class="claro">

<button class="oddF">dojo.query(".odd").forEach(...)</button><br />
<button class="evenAdd">dojo.query(".even").addClass("blue")</button><br />
<br />

  <div id="list">
    <div class="odd">One</div>
    <div class="even">Two</div>
    <div class="odd">Three</div>
    <div class="even">Four</div>
    <div class="odd">Five</div>
    <div class="even">Six</div>
</div>


    <script>dojoConfig = {async: true, parseOnLoad: false}</script>
   <script src="dojo/dojo.js"  data-dojo-config="async: true"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>

    <script>
   require([
    "dojo/query", 
    "dojo/request", 
    "dojo/dom-form" ,
    "dojo/dom-construct",
    "dojo/dom-style",
    "dojo/domReady!"],
  function(query,request,domForm,domConstruct,domStyle) {

    query(".oddF").on("click", function(e) {
        e.preventDefault();
        //var btn = e.target;

     dojo.query(".odd").forEach(function(node){
                    // For each ndoe with a class of "odd",
                    // remove the class "blue" and add the class "red"
                    dojo.removeClass(node, "blue");
                    dojo.addClass(node, "red");
        });



    });





  });
    </script>
</body>
</html>

Answer 1

使用模块dojo/dom-class来操纵节点的类。

  <script type="text/javascript">
   require(["dojo/query", "dojo/request", "dojo/dom-form",
            "dojo/dom-construct", "dojo/dom-style", "dojo/dom-class", "dojo/domReady!"],
    function(query,request,domForm,domConstruct,domStyle, domClass) {
     query(".oddF").on("click", function(e) {
      e.preventDefault();
      dojo.query(".odd").forEach(function(node){
        // For each node with a class of "odd",
        // remove the class "blue" and add the class "red"
        if (domClass.contains(node, "blue"))
          domClass.remove(node, "blue");
        domClass.add(node, "red");
      });
     });
    });
  </script>

如何使用 dojo amd 添加 onclick 事件以突出显示？

How to add onclick event to highlight using dojo amd?

dojo