2015-01-08 2 views
0

Я новичок в додзё. Как я могу использовать Dojo AMD, пытаясь выяснить, как нажимать на кнопку «oddF» Я могу Для каждого узла с классом «нечетный» я хочу удалить класс «синий» и добавить класс «красный»Как добавить событие onclick, чтобы выделить с помощью dojo amd?

<!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> 

ответ

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> 
Смежные вопросы