为什么我的 jquery 只影响我的 iron-list 的第一个条目？

Question

我有一个我想要的铁列表，当单击列表的一个条目时，左边框出现并在单击 off/another 条目时消失。

我已经设法搜索页面以找到一些看起来很有希望的 JQuery 并且使我能够在第一个条目上获得边框，但是它在这里停止。单击其他条目时，顶部条目获得边框，而不是单击的条目。

有什么帮助吗？

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../bower_components/polymer/polymer.html">
  <dom-module id="test-app-test">
    <template>
      <style>
        div {
          height: 20px;
          border-bottom: 1px lightgrey solid;
        }
        .red {
          border-left: 10px solid red;
        }
      </style>
        <div class="hello" on-click="toggleClass">hello</div>
        <div class="hello" on-click="toggleClass">hello</div>
        <div class="hello" on-click="toggleClass">hello</div>
        <div class="hello" on-click="toggleClass">hello</div> 
        <div class="hello" on-click="toggleClass">hello</div>
    </template>
    <script>
        Polymer({
          is: 'test-app-test',
          properties: {
            bgc: {
              type: String,
              observer: 'bgcChanged'
            }
          },
          toggleClass: function(e) {
            var toggleBorder = Polymer.dom(this.root).querySelector('.hello');
            $(toggleBorder).toggleClass('red');
          },
         bgcChanged: function() {
            var toggleBorder = Polymer.dom(this.root).querySelector('.hello');
            toggleBorder.style.backgroundColor = this.bgc;
          }
        });
    </script>
  </dom-module>

Answer 1

我不熟悉 Polymer，但按照代码，在我看来使用 .querySelector('.hello') 可能只会找到 class 的第一次出现。以下是在 toggleClass 函数中不使用 Polymer 的方法。

toggleClass: function(e) {
  $(e.target).parent().find('.red').removeClass('red');
  $(e.target).addClass('red');
},

注意：我无法测试它以确保它在您的示例中有效。

Answer 2

使用 querySelector 仅选择第一次出现。只需将 querySelector 替换为 querySelectorAll 即可

顺便说一句。使用 toggleClass 不需要 jquery。 Polymer 也有内置的方法。 https://www.polymer-project.org/1.0/docs/api/Polymer.Base#method-toggleClass

为什么我的 jquery 只影响我的 iron-list 的第一个条目？

why does my jquery only affect the first entry of my iron-list?

html

css

jquery

polymer