試圖使用帶參數的功能分別更改兩個圖標

Question

我不太清楚爲什麼我的代碼無法正常工作。我基本上有一個功能，可以移動兩個不同的圖標，具體取決於您點擊哪個header。下面的代碼：

var expanded = false; 
var eFunction = function (header, icon) { 
    $(header).on('click', function() { 
     if (expanded) { 
      $(icon).css({backgroundPosition: '0 100%'}); 
      expanded = true; 
     } else { 
      $(icon).css({backgroundPosition: '0 0'}); 
      expanded = false; 
     } 
    }); 
}; 

eFunction(this.$.aOne, this.$.eOne); 
eFunction(this.$.aTwo, this.$.eTwo); 

我使用的聚合物，翻譯this.$.aOne到AONE ID。我的控制檯都記錄了，他們不是問題。

是否有與參數和CSS ID功能的東西？

這裏的HTML，但我不認爲這是相關的：

<div class="accordheader" on-click="{{toggle}}" horizontal justified layout id="aOne"> 
    <div>{{items[0]}}</div> 
    <div class="expandicon" id="eOne"></div> 
</div> 
<core-collapse id="collapse" opened="false"> 
    <p>{{contents[0]}}</p> 
</core-collapse> 

<div class="accordheader" on-click="{{toggleTwo}}" horizontal justified layout id="aTwo"> 
    <div>{{items[1]}}</div> 
    <div class="expandicon" id="eTwo"></div> 
</div> 
<core-collapse id="collapsetwo" opened="false"> 
    <p>{{contents[1]}}</p> 
</core-collapse> 

編輯我是說如果（擴展）而不是如果（擴大==假）。哎呦

Answer 1

不，問題是你只有一個expanded標誌，但你試圖將它應用到兩個單獨的元素。

使用兩個單獨的標誌。你已經對他們方便的位置（通過調用eFunction創建的閉包）：

var eFunction = function (header, icon) { 
    var expanded = false;      // <== Note: Now a variable in the call 
    $(header).on('click', function() {  // <== This closes over that variable 
     if (expanded) { 
      $(icon).css({backgroundPosition: '0 100%'}); 
      expanded = true; 
     } else { 
      $(icon).css({backgroundPosition: '0 0'}); 
      expanded = false; 
     } 
    }); 
}; 

eFunction(this.$.aOne, this.$.eOne); 
eFunction(this.$.aTwo, this.$.eTwo); 

或者，如果可能的話，你可以在其他地方需要這個數據，存放起來的元素，使用data：

var eFunction = function (header, icon) { 
    $(header).on('click', function() { 
     var $this = $(this); 
     if ($this.data("expanded")) { 
      $(icon).css({backgroundPosition: '0 100%'}); 
      $this.data("expanded", true); 
     } else { 
      $(icon).css({backgroundPosition: '0 0'}); 
      $this.data("expanded", false); 
     } 
    }); 
}; 

eFunction(this.$.aOne, this.$.eOne); 
eFunction(this.$.aTwo, this.$.eTwo); 

請注意，這依賴於事實上，調用data爲不存在的東西給你undefined，這是falsey。