Question

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

我已经设法搜索页面，找到一些看起来很有前途的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')可能只能找到该类的第一个外观。如果不在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只影响我的铁列表的第一个条目？

2 个答案: