2016-11-02 60 views
0

我希望我的代碼通過添加slactive類來顯示菜單並更改ddown集合的輸入值。我有一些代碼,這是不工作的控制檯說,在第9行,也ddown[i],也沒有slitems[j]是對象,因爲它們是未定義的。如何解決這個問題?未定義不是下拉對象中的對象

var slitems = document.getElementsByClassName('slitem'); 
    ddown = document.getElementsByClassName('ddown'); 
for(i=0; i<ddown.length; i++) { 
    ddown[i].addEventListener('click', function(){document.getElementById('sl'+i).classList.add('slactive');valueChange()}); 
} 
function valueChange(){ 
    for(j=0;j<slitems.length;j++){ 
     slitems[j].addEventListener('click', function(){ 
      ddown[i].value = slitems[j].value; 
      document.getElementById('sl'+i).classList.remove('slactive'); 
     }); 
    } 
} 

P.S. slitems是菜單元素的集合。

+0

可能也想看看這個:[在循環中創建閉包:常見的錯誤](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#Creating_closures_in_loops_A_common_mistake) – Bogdan

+0

@波格丹非常感謝! – MaxelRus

回答

2

你看,你在做什麼至少有兩個缺陷:

1:執行此操作時:爲(i = 0;我< ddown.length;我++)...您聲明命名的全局變量我認爲,在循環的結尾將有值ddown.length;所以,在valueChange中,它將始終具有相同的值

第二:我設置爲ddown.length,這是一個不存在於數組中的位置,因此出現錯誤。

爲了解決這個問題,使用VAR令i作爲局部變量,並把它傳遞作爲參數:

var slitems = document.getElementsByClassName('slitem'); 
    ddown = document.getElementsByClassName('ddown'); 
for(var i=0; i<ddown.length; i++) { 
    ddown[i].setAttribute("data-index", i); 
    ddown[i].addEventListener('click', function(e){ 
     var i = e.target.dataset.index; 
     document.getElementById('sl'+i).classList.add('slactive');valueChange(i) 
    }); 
} 
function valueChange(i){ 
    for(var j=0;j<slitems.length;j++){ 
     slitems[j].setAttribute("data-index", j); 
     slitems[j].setAttribute("data-index2", i); 
     slitems[j].addEventListener('click', function(e){ 
      var j = e.target.dataset.index; 
      var i = e.target.dataset.index2; 
      ddown[i].value = slitems[j].value; 
      document.getElementById('sl'+i).classList.remove('slactive'); 
     }); 
    } 
} 

EDIT

改變了代碼添加在迭代器作爲節點使用的變量屬性,什麼應該解決變量的範圍問題。

+0

現在'slitems [j]'是未定義的。 – MaxelRus

+0

oooops,是的,抱歉,沒有意識到,會編輯 – sergio0983

+0

非常感謝! – MaxelRus

相關問題