すべてのアイアンリストトランジションをトグル停止する方法 - ポリマー

Question

アイアンリストに問題があり、右から入ってくるパネルの切り替えが発生しています。

私は正しく動作するようになっていますが、ある特定の行の設定アイコンをクリックすると、すべての行のすべてのパネルがトリガーされます。

解決方法に関するご提案はありますか？

<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つの要素（ボタンの親であるか、あなたのコードは意味をなさない）だけを選択する必要があります。それは私には本当にポリマープロジェクトで必要とされていないのjQueryよりもはるかに優れているようだので、私は、ポリマー機能toggleClassを使用しています

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

：これを行うには、あなたの関数を更新します。プラスの単語thisは期待どおりに動作しません。現在クリックされている要素を指すのではなく、要素をホストします。 （全体test-app-test）

このようなものがありますか？あなたのコードは本当に私にとって意味をなさないので、私はあなたが何をしようとしているのか分かりません。クラスsettingsの要素を検索しようとしていますが、この要素ではクラスsettingsMoveを削除しますか？ paper-icon-buttonクラスをsettingsMoveに設定しますか？

あなたは何を達成したいですか？ユーザーがボタンを押すと、特定の行が表示されなくなりますか？