隐藏通过聚合物/圆顶点击链接时控制台中的错误

Question

嗨，Stack Overflowians，

当我单击相同的Click foo链接时，我想隐藏Click foo链接。

我有以下代码：

<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链接时，我在控制台选项卡中收到错误：

Uncaught ReferenceError: toggle_visibility is not defined at HTMLAnchorElement.onclick

我想在单击Click foo链接时隐藏该链接

任何人都可以帮忙吗？

提前感谢

Answer 1

在Polymer中，您可以通过使用on- +事件名称声明性地添加事件处理程序。因此，在您的情况下为on-click，而不是onclick。

此外，您需要提供方法的名称，而不是调用它。因此，您的标签将变为：

<a href="#" onclick="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);