javascript - Polymer querySelector 在 dom-repeat 中找不到元素

Question

目标:

我正在尝试在 dom-repeat 元素内选择一个 div。

下面的代码包含我要选择的div。 id="med[[索引]]"

代码:

<div class="card">
    <h1>Medicijn overzicht:</h1>
    <template is="dom-repeat" items="{{employees}}">
        <div class="inner-card" id="[[index]]">
        <div><span><b>{{item.first}}</b></span> <span>{{item.last}}</span>mg<br><span>{{item.stuks}}</span> stuks</div>
        <div id="med[[index]]" style="display:none"><br><br><br><br><br>Goed verhaal</div>
        </div>
    </template>
</div>

问题:

这里的目标是当父级被单击时让 div 展开，但是从 click 函数中调用 querySelect 时似乎无法找到该元素。当使用静态名称在函数顶部执行此搜索时，它发现它很好。

            attached:function(){
            this.async(function() {
                var cards = Polymer.dom(this.root).querySelectorAll(".inner-card");
                var test = Polymer.dom(this.root).querySelector("#med0"); //Finds the element
                console.log(test);  // This is fine
                console.log("cards",cards);
                $(cards).click(function(evt){
                    var target= evt.currentTarget;
                    var tindex = target.id;
                    var targetDiv = Polymer.dom(this.root).querySelector("#med"+tindex); //Doesn't find it.
                    console.log("#med"+tindex)
                    console.log(targetDiv);
                    $(targetDiv).slideDown("slow");
                    console.log("trigger"+tindex);
                });
            });
       }

这可能只是我误解了它是如何工作的，我对此很陌生。

谁能告诉我我在这里做错了什么？ 提前致谢。

Answer 1

另一个解决方案是在函数结束后添加 .bind(this) 。我在老项目中使用它，ES6不能使用。使用 .bind(this) 看起来更“干净”

就您而言:

     $(cards).click(function(evt){
            var target= evt.currentTarget;
            var tindex = target.id;
            var targetDiv = Polymer.dom(this.root).querySelector("#med"+tindex); //Doesn't find it.
            console.log("#med"+tindex)
            console.log(targetDiv);
            $(targetDiv).slideDown("slow");
            console.log("trigger"+tindex);
     }.bind(this));