Question

目标：

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

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

代码：

<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，但是在单击函数中调用时，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)似乎更清洁＆＃39;

在你的情况下：

     $(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));

Answer 2

点击处理程序中对this.root的引用与上面引用的引用不同。点击处理程序的root上下文中可能不存在this - 它肯定与上面的this.root不同，因为this指的是全局this this。

您可能希望保存this.root或this.async(function() { var cards = Polymer.dom(this.root).querySelectorAll(".inner-card"); var test = Polymer.dom(this.root).querySelector("#med0"); var root_root=this.root; // **ADD THIS** $(cards).click(function(evt){ var target= evt.currentTarget; var tindex = target.id; var targetDiv = Polymer.dom(root_root).querySelector("#med"+tindex); // **CHANGE THIS** $(targetDiv).slideDown("slow"); console.log("trigger"+tindex); }); });以便在点击处理程序中使用：

$(cards).click((evt) => { …

或者，如果您可以使用ES6的箭头功能，只需将点击处理程序转换为箭头功能即可轻松解决此问题，

this

这将使用箭头函数周围上下文中的falling = false, set the velocity of y to 0 and set y on top of the tile else falling = true。

Polymer querySelector在dom-repeat

目标：

代码：

问题：

2 个答案: