Javascript 尝试使用带参数的函数分别更改两个图标

我不太清楚为什么我的代码不起作用。我基本上有一个功能，可以根据您单击的

标题

移动两个不同的图标。代码如下：

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);

我使用的是Polymer，它将

这个.$.aOne

转换为aOne ID。我已经在控制台上记录了这两个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>

{{items[0]}
{{contents[0]}

{{items[1]}
{{contents[1]}

---

edit我说的是if（展开）而不是if（展开==false）。哎哟

不，问题是您只有一个

扩展的

标志，但您试图将其应用于两个单独的元素

使用两个单独的标志。您已经为它们找到了一个方便的位置（通过调用

effunction

创建的闭包）：

---

请注意，这取决于这样一个事实，即调用

数据

查找不存在的内容会得到

未定义的

，这是错误的。

谢谢您提供的信息！事实上，我发现了我的错误，这是一个小的逻辑问题，但我将在将来使用这些信息来存储数据。谢谢：-）

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);

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);