Javascript 将jQuery代码转换为Polymer？

是否有可能将一些JQuery转换成PolymerJ

问题：希望某个CSS类只应用于被单击的元素

我让它在JQuery中工作，但想知道它是否可以在Polymer中完成？ 我知道如何从活动元素中添加和删除CSS，只是不知道如何从除活动元素之外的所有元素中删除CSS

正在应用到的组件

 <iron-ajax id="userGet"  handle-as="json"  method="GET" on-response="setUser"></iron-ajax>
    <div class="iron-list-container">
         <iron-list id="list" items="setUser" as="user" >
            <div class="item" id="item">
                 <!-- USER INFO STUFF GOES HERE -->
             </div>
         </iron-list>
    </div>

PolymerJS到目前为止

toggleLeftBorder : function() {
    /* this line will add the necessary css class to selected elements */
    this.$.item.classList.add('addBorderLeft');
},

---

在聚合物中没有像jQuery提供的那样的一行程序可以做到这一点。Polymer尝试尽可能轻，并且不添加太多DOM操作工具

vanilla JS中的等效行可能是：

this.shadowRoot.querySelectorAll('.addBorderLeft')
    .forEach(item => item.classList.remove('addBorderLeft');

由于您一次只希望选择一个项目，因此您可以在设置新选择的项目之前跟踪以前选择的项目并从中删除类：

toggleLeftBorder : function() {
  if (this.selectedUserElement) {
    this.selectedUserElement.classList.remove('addBorderLeft');
  }

  this.selectedUserElement = this.$.item;
  this.selectedUserElement.classList.add('addBorderLeft');
},

但是，因为您使用的是

铁名单

，它附带了烘焙的选择，所以您应该能够这样声明：

<iron-ajax id="userGet"  handle-as="json"  method="GET" on-response="setUser"></iron-ajax>

<div class="iron-list-container">
  <iron-list id="list" items="[[setUser]]" as="user" 
    selection-enabled selected-item="{{selectedUser}}">
    <div class="item">
      <!-- USER INFO STUFF GOES HERE -->
    </div>
  </iron-list>
</div>

这将实现以下功能：

• 在元素上创建一个名为

  selectedUser

  的属性，该属性始终是当前选定的用户。我怀疑您在元素/应用程序的其他地方也需要这个
• 将所选的

  类添加到所选的
  铁列表
  项中。请注意，这与您的
  addBorderLeft
  类不同，因此您需要将样式放在
  上。改为选中

---

您是否需要支持选择多个项目？从jQuery代码片段看，这似乎是不可能的，但我只是想确保我理解。您要找的基本上是一个关于如何编写代码的教程。。因为很明显，如何将jQuery代码转换为vanilla代码，所以您要求我们教您如何编写简单的聚合代码？在线上还没有这方面的教程吗？@zacharytamas:我添加了一个GIF，其中包含了我想要复制的JQuery的当前功能。@vsync:你可能是对的，但我在发布这个问题之前搜索了整个网络，没有找到任何有用的东西。在承认失败之前，我会做，做腿部工作。

<iron-ajax id="userGet"  handle-as="json"  method="GET" on-response="setUser"></iron-ajax>

<div class="iron-list-container">
  <iron-list id="list" items="[[setUser]]" as="user" 
    selection-enabled selected-item="{{selectedUser}}">
    <div class="item">
      <!-- USER INFO STUFF GOES HERE -->
    </div>
  </iron-list>
</div>