搜尋

首頁  >  問答  >  主體

javascript全選功能引發的困惑

直接上程式碼
程式碼如下,全選功能不好用

     var _select_all = document.getElementById("select_all");
     var _input = document.querySelectorAll("#shop_content ul input[type=checkbox]");
    _select_all.addEventListener("click",function() {
        
                            
            for(var i = 0;i<_input.length;i++) {
                 _input[i].checked="checked";
        }
     })

改動一句話

var _select_all = document.getElementById("select_all");
    
    _select_all.addEventListener("click",function() {
         var _input = document.querySelectorAll("#shop_content ul input[type=checkbox]");
                            
            for(var i = 0;i<_input.length;i++) {
                 _input[i].checked="checked";
        }
     })

為什麼要把_input放到下面程式碼正常執行了?根據作用域回呼函數中不是可以取得到外界的變數嗎?

大家讲道理大家讲道理2804 天前535

全部回覆(5)我來回復

  • 黄舟

    黄舟2017-05-19 10:36:59

    親測兩種都可以啊:https://jsfiddle.net/8j9q69qm/

    回覆
    0
  • PHP中文网

    PHP中文网2017-05-19 10:36:59

    測試了一下,這兩種都是可以的

    回覆
    0
  • PHP中文网

    PHP中文网2017-05-19 10:36:59

    不會的,都一樣的

    回覆
    0
  • 習慣沉默

    習慣沉默2017-05-19 10:36:59

    var _select_all = document.getElementById("select_all");
    var _input = document.querySelectorAll("#shop_content ul input[type=checkbox]");
    console.log(_input);
    _select_all.addEventListener("click",function() {
        
                            
            for(var i = 0;i<_input.length;i++) {
                 _input[i].checked="checked";
        }
     })

    log出來看看就知道了,如果是undefined的話就知道問題出在那了。

    回覆
    0
  • 習慣沉默

    習慣沉默2017-05-19 10:36:59

    一個是事先查好節點快取起來,一個是點擊的時候即時去查節點。如果 #shop_content ul input[type=checkbox] 這個選擇器對應的節點不會改變的話兩種方法是一樣的,而且快取的效率比較高。如果對應節點可能刪除、增加或更換,必須使用第二種方法,每次點擊的時候即時去找節點

    回覆
    0
  • 取消回覆