我需要動態地將addEventListener添加到數組中的對象

如果在菜單[1]或菜單[0]中使用按鈕功能的move_box函數替換菜單[i]，則事件監聽器已成功添加。當我點擊一個按鈕，我得到這個錯誤：未捕獲無法補間一個空目標。我認爲它與move_box函數中的「this」的上下文有關。我有這樣的的jsfiddle http://jsfiddle.net/jimeast123/F4WkU/1/我需要動態地將addEventListener添加到數組中的對象

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 
    <style type="text/css"> 
    .box { 
     margin: 0px; 
     height: 50px; 
     width: 50px; 
     background-color: blue; 
     } 
    li {list-style: none;} 
    .inner {margin-left: -40px; display: block;} 
    .inner li, .box {display: block;} 

    #outer li { display: inline-block;} 
    </style> 
</head> 
<body> 
<ul id="outer"> 
    <li><button type="button" class="toggle" name="btn1">Open</button> 
     <ul class="inner"> 
      <li><div class="box"></div></li> 
     </ul> 
    </li><!-- end of outer li --> 
    <li><button type="button" class="toggle" name="btn2">Open</button> 
     <ul class="inner"> 
       <li><div class="box"></div></li> 
     </ul> 
    </li> <!-- end of outer li --> 
</ul> <!-- end of outer --> 
<script> 

var menu = document.getElementsByClassName('box'); 
var btn = document.getElementsByClassName('toggle'); 

function move_box(e) { 
    if(this.innerHTML === 'Open') { 
     TweenLite.to(menu[i], 2, {y: 100, ease:Power2.easeOut}); 
    this.innerHTML = 'Close'; 
    } else { 
    TweenLite.to(menu[i], 2, {y: 0, ease:Power2.easeOut}); 
    this.innerHTML = 'Open';  
     } 
    } 

for (var i = 0; i < btn.length; i++) { 
    btn[i].addEventListener("click", move_box, false); 
} 


</script> 
</body>

來源

2014-04-12 jimeast

的變量「i」是不是在函數被調用，因爲它是循環的一部分時間來定義。你可以做的就是使用「this」來查找數組中按鈕的索引，然後使用相同索引的菜單。下面的代碼是未經測試，但我認爲它會工作：

TweenLite.to(menu[btn.indexOf(this)], 2, {y: 100, ease:Power2.easeOut});

如果這是不正確的，我認爲它至少會點你在正確的方向。

編輯：

以下代碼工作。它通過導航DOM來找到相關的方框採用不同的方法。

var btn = document.getElementsByClassName('toggle'); 

function move_box(e) { 
    if (this.innerHTML === 'Open') { 
     TweenLite.to(this.parentNode.getElementsByClassName('box')[0], 2, { y: 100, ease: Power2.easeOut }); 
     this.innerHTML = 'Close'; 
    } else { 
     TweenLite.to(this.parentNode.getElementsByClassName('box')[0], 2, { y: 0, ease: Power2.easeOut }); 
     this.innerHTML = 'Open'; 
    } 
} 

for (var i = 0; i < btn.length; i++) { 
    btn[i].addEventListener("click", move_box, false); 
}

來源

2014-04-12 23:08:28

現在我有TypeError：undefined不是一個函數，但我認爲我們是在正確的軌道上。 – jimeast

看來我不得不將循環放入事件處理程序中，使其遞歸。我懷疑這會以某種方式工作。 – jimeast

我找到了解決我首先在環設置ID上BTN即BTN + i，那麼在事件處理程序我使用的getAttribute到retreve的ID，然後使用SUBSTR方法在結束時，如果獨立的列數然後我將id賦給變量j，然後用j作爲菜單數組的索引。這裏的腳本：

<script> 
var i; 
var menu = document.getElementsByClassName('box'); 
var btn = document.getElementsByClassName('toggle'); 

function move_box(e) { 
     var j; 

     var id = this.getAttribute("id"); 
     j = id.substr(3,1); //get digit at end of id. 
      if(this.innerHTML === 'Open') { 
      TweenLite.to(menu[j], 2, {y: 100, ease:Power2.easeOut}); 
     this.innerHTML = 'Close'; 
     } else { 
     TweenLite.to(menu[j], 2, {y: 0, ease:Power2.easeOut}); 
     this.innerHTML = 'Open';  
      } 
    } 

for (i = 0; i < btn.length; i++) { 
    btn[i].addEventListener("click", move_box, false); 
    btn[i].setAttribute("id", "btn" + i); 
} 

</script>

來源

2014-04-13 23:58:39 jimeast

我需要動態地將addEventListener添加到數組中的對象

回答

相關問題