Question

我有3个纸张切换按钮，我想要禁用，直到我点击“编辑”按钮（这样做有意义）。

我已经用冗长的形式拼凑了这个，但我想知道在PolymerJS中是否有一种方法可以使用 this。$。ID-NAME 或< strong> this。$$（'CLASS-NAME'）选择所有的纸张切换按钮，假设我给了他们所有相同的ID和CLASS名称（重复ID的错误做法，我知道）。

感谢任何帮助。我知道它目前正在运作，但我只是想知道是否有更简单的方法。

我目前正在使用以下内容（单击带有点击事件的按钮时会发生切换“editMode”）：

HTML

<div class="detail info horizontal layout">
    <div class="bodyHeaderText flex">Active User</div>
        <paper-toggle-button class="toggle" id="toggle" checked$="{{isActive}}" disabled></paper-toggle-button>
    </div>
    <div class="detail info horizontal layout">
        <div class="bodyHeaderText flex">Operator</div>
        <paper-toggle-button class="toggle" id="toggle" checked$="{{isOperator}}" disabled></paper-toggle-button>
    </div>
    <div class="detail info horizontal layout">
        <div class="bodyHeaderText flex">Manager</div>
        <paper-toggle-button class="toggle" id="toggle" checked$="{{isManager}}" disabled></paper-toggle-button>
    </div>

PolymerJS

editMode : function() {
          toggle1 = this.$.toggle1;
           toggle2 = this.$.toggle2;
           toggle3 = this.$.toggle3;

           if( EditDiv.style['display'] == 'none' )
           {
            toggle1.toggleAttribute('disabled');
            toggle2.toggleAttribute('disabled');
            toggle3.toggleAttribute('disabled');
           }
           else
           {
              toggle1.toggleAttribute('disabled');
              toggle2.toggleAttribute('disabled');
              toggle3.toggleAttribute('disabled');
           }
        }

Answer 1

您可以查看Polymer DOM API，其中包含与DOM交互的大量功能。我认为您正在寻找Polymer.dom(this.root).querySelectorAll('.toggle')

Answer 2

$$ returns the first node in the local DOM that matches selector.

你可以做到

Array
  .from(Polymer.dom(this.root).querySelectorAll('.foo'))
  .forEach($0 => /* do something */)
;

然后，只是一个注释，您的代码段没有多大意义，因为您在if和else语句中执行相同的操作：

if(expression) {
  toggle1.toggleAttribute('disabled')
} else { 
  toggle1.toggleAttribute('disabled')
}

// is equal to:
toggle1.toggleAttribute('disabled')

你的代码肯定是这样的：

{
  editMode() {
  
    return [
      this.$.toggle1,
      this.$.toggle2,
      this.$.toggle3
    ]
      .forEach($0 => $0.toggleAttribute('disabled'))
  }
}

this。$或this。$$选择具有相同id或类名的所有元素 - Polymer

2 个答案: