無法理解JQuery和一些javascript-有解無憂

我不明白為什么一種解決方案有效而另一種無效。這list是一個具有三個不同值的 Map。從中，我構建了一個包含 3 個 div 塊的結構，并在單擊時添加了一個事件。這個例子不起作用；它僅將事件偵聽器添加到串列中的最后一個塊：

function create_struct(list, parent){
    let _struct = new Map();
    let el;
    list.forEach((value, key, list)=>{
        el = $( "<div/>", {id: key, class: "TAB_CAPTION"}).appendTo(parent);
            el.on({
                "click": function(){
                    el.removeClass("active");
                    el.addClass("active");
                 }
            });
        _struct.set(key, el);
    });
    return _struct; 
};

但是，這個使用不帶變數的 Map 作業正常，我不明白為什么！

function create_struct(list, parent){
    let _struct = new Map();
    let el;
    list.forEach((value, key, list)=>{
        el = $( "<div/>", {id: key, class: "TAB_CAPTION"}).appendTo(parent);
        _struct.set(key, el);
        _struct.get(key).on({
                "click": function(){
                    _struct.get(key).siblings().removeClass("active");
                    _struct.get(key).addClass("active");
            }
        });
    });
    return _struct; 
};

uj5u.com熱心網友回復：

您的代碼中的el變數是什么？

            el.on({
                "click": function(){
                    el.removeClass("active");
                    el.addClass("active");
                 }
            });

您參考第三行 ( let el) 中定義的變數。當您完成迭代值時，它將保存最后一個元素。每個函式都會為最后一個值操作類。

簡而言之，代碼為每個元素添加了一個事件偵聽器。但是，事件偵聽器會操縱最后添加的元素。

我建議將變數定義移到內部功能塊中。然后你有每個點擊處理程式的正確元素。

function create_struct(list, parent){
    let _struct = new Map();
    list.forEach((value, key, list)=>{
        const el = $( "<div/>", {id: key, class: "TAB_CAPTION"}).appendTo(parent);
        el.on({
            "click": function(){
                el.removeClass("active");
                el.addClass("active");
             }
        });
        _struct.set(key, el);
    });
    return _struct; 
};

請讓我知道它是否有效。我可能會犯錯誤，因為我無法測驗代碼。

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510239.html

標籤：javascriptjQuerydom

上一篇：為什么我的石頭剪刀布在第一次點擊時不起作用，游戲運行良好但第一次點擊沒有任何反應

下一篇：單擊時如何將類切換到元素？