javascript - Vanilla javascript 改变 this 的数据属性

Question

我正在开发一个使用 Vanilla JavaScript 的页面，不幸的是我只了解 jQuery。我的 anchor 标记附加了一个函数来切换其他内容，并且我想在 anchor 上将 aria-expanded 从 false 更改为 true单击它，然后再次单击时返回 false。

这是我尝试过的:

<script type="text/javascript">
    function toggleMe(a) {
        var t = this;
        var e = document.getElementById(a);
        if (!e) return true;
        if (e.style.display == "none") {
            t.setAttribute('aria-expanded', 'true');
            e.style.display = "block"
        }
        else {
            t.setAttribute('aria-expanded', 'false');
            e.style.display = "none"
        }
        return true;
    }
</script>

<a onclick="return toggleMe('content1')" aria-expanded="false">Expand content</a>

<div style="display: none" id="content1">
  <p>Expanded content here</p>
</div>

Answer 1

您的问题在这一行:

var t = this;

默认情况下，该值是窗口对象。您可以直接在内联定义中传递值，例如:

<a onclick="return toggleMe('content1', this)" aria-expanded="false">Expand content</a>

function toggleMe(a, currEle) {
    var t = currEle;
    var e = document.getElementById(a);
    if (!e) return true;
    if (e.style.display == "none") {
        t.setAttribute('aria-expanded', 'true');
        e.style.display = "block"
    }
    else {
        t.setAttribute('aria-expanded', 'false');
        e.style.display = "none"
    }
    return true;
}

<a onclick="return toggleMe('content1', this)" aria-expanded="false">Expand content</a>

<div style="display: none" id="content1">
    <p>Expanded content here</p>
</div>