Question

如果有人能解释下面代码的作用，我将非常感激。作为JavaScript的新手，我只是粗略地了解它的作用。这将是一个很大的帮助。如果问题是天真的，请原谅。

var init = function() {
    var box = document.querySelector('#theArt').children[0],
        showPanelButtons = document.querySelectorAll('#show-buttons input'),
        panelClassName = 'show-front',

        onButtonClick = function(event) {
            box.removeClassName(panelClassName);
            panelClassName = event.target.className;
            box.addClassName(panelClassName);
        };

    for (var i = 0, len = showPanelButtons.length; i < len; i++) {
        showPanelButtons[i].addEventListener('click', onButtonClick, false);
    }
};

window.addEventListener('DOMContentLoaded', init, false);

这是受影响的HTML代码

 <div id="theArt">
<div id="cube" class="show-front">
  <figure class="front"><img src="../_images/feature1.jpg" width="270px" height="270px"></figure>
  <figure class="back"><img src="../_images/feature2.jpg" width="270px" height="270px"></figure>
  <figure class="right"><img src="../_images/feature3.jpg" width="270px" height="270px"></figure>
  <figure class="left"><img src="../_images/feature4.jpg" width="270px" height="270px"></figure>
  <figure class="top"><img src="../_images/painting01.png" width="270px" height="270px"></figure>
  <figure class="bottom"><img src="../_images/painting02.png" width="270px" height="270px"></figure>
</div>

<div id="options">
<p id="show-buttons">
  <input type="image" src="../_images/feature1.jpg" width="90" height="90" class="show-front"></input>
  <input type="image" src="../_images/feature2.jpg" width="90" height="90" class="show-back"></input>
  <input type="image" src="../_images/feature3.jpg" width="90" height="90" class="show-right"></input>
  <input type="image" src="../_images/feature4.jpg" width="90" height="90" class="show-left"></input>
  <input type="image" src="../_images/painting01.png" width="90" height="90" class="show-top"></input>
  <input type="image" src="../_images/painting02.png" width="90" height="90" class="show-bottom"></input>
</p>

Answer 1

window.addEventListener（'DOMContentLoaded'，init，false）;

当浏览器中加载的DOM内容和init函数被调用时，上面一行试图向页面添加一个事件。 Init是具有函数定义的变量。

在函数定义中，变量框试图获取ID为“theArt”的元素。 onButtonClick是具有另一个函数定义的变量。

showPanelButtons是一个变量，它将包含id为“show-buttons”且元素为“input”的所有元素列表。 For循环尝试为showPanelButtons列表中的每个元素添加单击事件。

希望有所帮助......

Answer 2

    //It is a javascript function
      var init = function() {
   //document.querySelector is a method which will return the first matched selector 
   //which is theArt in this snippet 
  //Selecting the first child none of #theArt DOM element and assigning it a variable
      var box = document.querySelector('#theArt').children[0],

     //document.querySelectorAll is another method which will return all matched elements unlike 
    //document.querySelector which return only single element.
    //showPanelButtons & panelClassName are variables.
   //This line selecting all input element which are inside DOM element 
    // with id show-buttons
     showPanelButtons = document.querySelectorAll('#show-buttons input'),
     panelClassName = 'show-front',

      //Could not find removeClassName function in your code or may be you are
      // using prototype.js
      //event.target.className will return the class on which the events have  
      //occured. For example click,keyup,keydown are events.
      //If you click on a button or input field and 
     //if you use  event.target.className it will return 
     //class of the button/input field
          onButtonClick = function( event ){
            box.removeClassName( panelClassName );
            panelClassName = event.target.className;
            box.addClassName( panelClassName );
          };

        //addEventListener is a method for attaching event to loop. 
       //Also look at scope of i if you want to accurately understand 
       // the usage of addEventListener  inside the loop  


        for (var i=0, len = showPanelButtons.length; i < len; i++) {
        showPanelButtons[i].addEventListener( 'click', onButtonClick, false);
        }

    };
    // DOMContentLoaded is an event .Here DOMContentLoaded is added to 
     //window object using addEventListener. 
//DOMContentLoaded event fires when the markup of a webpage has been 
//parsed.The last parameter in addEventListener (true/false) is used if you want 
//the event to capture or bubble up.
         window.addEventListener( 'DOMContentLoaded', init, false);

以下javascript代码中的解释

2 个答案: