jquery - 如何停止切换所有 iron-list 转换 - Polymer

Question

我一直在处理 iron-list 和触发面板从右侧进入的转换时遇到问题。

我已经让过渡正常工作，但是当我点击一个特定行的设置图标时，所有行的所有面板都会被触发。

关于如何解决这个问题有什么建议吗？

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-list/iron-list.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<dom-module id="test-app-test">
  <template>
    <style include="iron-flex iron-flex-alignment">
       :host {
        display: block;
      }

      .container {
        border-bottom: 1px solid lightgrey;
      }

      .data:hover {
        background: lightgrey;
      }

      .data:last-child {
          border-bottom: none;
        }

        iron-list {
          background: white;
        }

        .icons {
          margin: 24px 16px 24px 16px;
        }

        .settings {
          padding: 10px 0px 10px 0px;
          margin: 0px 10px 0px 10px;
          width: 150px;
          height: 100%;
          background: grey;
          position: fixed;
          right: -160px;
          transition: transform 0.5s;
          color: white; 
        }

        .settingsMove {
          transform: translate(-140px);
        }

    </style>
      <iron-ajax url="data.json" last-response="{{data}}" auto ></iron-ajax>  
          <iron-list items="[[data]]" as="data" class="topList" selection-enabled >
              <template >

                    <div class="container horizontal layout">
                      <paper-icon-button class="icons" icon="settings" on-click="toggleSettings"></paper-icon-button>
                      <div class="settings">
                        <paper-icon-button icon="delete"></paper-icon-button>
                        <paper-icon-button icon="create"></paper-icon-button>
                        <paper-icon-button icon="clear" on-click="toggleSettings"></paper-icon-button>
                      </div>
                    </div>              
              </template>
        </iron-list>
  </template>

  <script>
    Polymer({

      is: 'test-app-test',

      properties: {

      },

      toggleSettings : function() {
          $('.settings').removeClass('settingsMove');
          $(this).toggleClass('settingsMove');
      },

    });
  </script>
</dom-module>

https://jsfiddle.net/f6dvbpx6/

Answer 1

您的函数 toggleSettings 查找所有具有 settings 类的元素，这是错误的行为。您只需要选择 1 个元素(可能是按钮的父元素？您的代码没有意义)。为此，请更新您的函数:

 toggleSettings : function(e) {
      this.toggleClass("settingsMove", false, e.target.parentElement);
      this.toggleClass("settingsMove", true, e.target);
 },

我正在使用 Polymer 函数 toggleClass 因为在我看来它比 Jquery 好得多，而 Jquery 在 Polymer 元素中并不是真正需要的。另外，单词 this 并不像您预期​​的那样工作。它不指向当前单击的元素，而是指向宿主元素。 (整个 test-app-test)

大概是这样的吧？我不知道你在尝试什么，因为你的代码对我来说真的没有意义。您正在尝试查找具有类 settings 的元素并在此元素上删除类 settingsMove ？然后在 paper-icon-button 上设置类 settingsMove ?

你想达到什么目的？当用户按下按钮时，一个特定的行从 View 中隐藏？