Question

在Polymer中，您可以使用this.$.idOfElement获取id idOfElement的元素。

如果我在变量中只有id的值，我如何通过其id获取动态创建的元素？

注意：我想要触及的元素是动态创建的：

<template is="dom-repeat" items="[[days]]" as="o">
    <my-custom-element id$="[[getId(o)]]"></my-custom-element>
</template>

我的应用中有很多这些<my-custom-element>，需要逐个掌握它们。

修改

这些都不起作用，它们都返回undefined或null：

this.$[id]
this.$$(id)
this.root.querySelector('my-custom-element#' + id)
Polymer.dom(e.currentTarget).querySelector('my-custom-element#' + id)

Answer 1

您不能将自动节点查找器（this.$.x）用于动态节点。您必须使用this.$$(selector)，其作用类似于当前元素的子项document.querySelector()。

这就是为什么你必须按照Alan的建议使用this.$$('#' + nodeId)。

Polymer({
  is: 'my-elem',
  
  makeRed: function() {
    this.$$('#li2').style.color = 'red';
  }
});

<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>
</head>

<body>
  <my-elem></my-elem>
  
  <dom-module id="my-elem">
    <template>
      <ul>
        <template is="dom-repeat" items='[ 1, 2, 3 ]'>
          <li id="li[[item]]">{{item}}</li>
        </template>
      </ul>
      
      <input type="button" value="make 2 red" on-tap="makeRed" />
    </template>
  </dom-module>

</body>
</html>

获取对动态创建元素的引用

1 个答案: