在点击 Polymer/Dom 时隐藏 link 时控制台出错

Question

嗨 Stack Overflowians，

我想在单击相同的 Click foo link 时隐藏 Click foo link。

我有以下代码：

<dom-module>
    <div id="foo">
        <a href="#" onclick="toggle_visibility('foo');">Click foo</a>
    </div>

<script>
    Polymer({
        is: 'test-file',

        toggle_visibility: function(id) {
            var e = document.getElementById(id);

            if (e.style.display === "none") {
                e.style.display = "block";
            } else {
                e.style.display = "none";
            }
        });
</script>
</dom-module>

当我点击 Click foo link:

时，控制台选项卡出现错误

Uncaught ReferenceError: toggle_visibility is not defined at HTMLAnchorElement.onclick

我希望 link 在单击 Click foo 时隐藏 link

有人可以帮忙吗？

提前致谢

Answer 1

在 Polymer 中，您可以使用 on- + 事件名称以声明方式添加事件处理程序。所以在你的情况下，那将是 on-click，而不是 onclick。

此外，您需要提供方法的名称，而不是调用它。所以你的标签会变成这样：

<a href="#" on-click="toggle_visibility">Click foo</a>

因为它不传递参数，所以你可以找到另一种方法，比如使用 data- 属性，或者如果与锚点的关系每次都相同，则只依赖于 div是父节点：

toggle_visibility: function(event) {
    var e = event.currentTarget.parentNode;

    if (e.style.display === "none") {
        e.style.display = "block";
    } else {
        e.style.display = "none";
    }
}

UPDATE：另请注意，如果您使用一种方法来查询要为其切换显示的元素，则很可能必须查询 shadowDom，不是文档级别。所以

var e = document.getElementById(id);

会变成：

var e = this.shadowRoot.getElementById(id);

在点击 Polymer/Dom 时隐藏 link 时控制台出错

Error in console while hiding the link on click through Polymer/Dom

dom

onclick

polymer