Question

我正在使用Vanilla JavaScript的页面，不幸的是我只对jQuery有所了解。我有一个附加到我的锚标签的功能以切换其他内容，我想在点击它时将aria-expanded从false更改为true，然后再返回false再次点击它时。

以下是我尝试的内容：

＆＃13;

<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>

＆＃13;

Answer 1

根据您当前的实现this，函数toggleMe()引用window而不是当前元素（锚）。

您可以使用.bind()设置上下文

bind()方法创建一个新函数，在调用时，将其this关键字设置为提供的值，并在调用新函数时提供任何前面提供的给定参数序列。 / p>

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

或，.call()

call()方法调用具有给定this值的函数和单独提供的参数。

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

＆＃13;

<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.bind(this)('content1')" aria-expanded="false">Expand content</a>

<div style="display: none" id="content1">
  <p>Expanded content here</p>
</div>

＆＃13;

Answer 2

您的问题在这一行：

var t = this;

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

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

＆＃13;

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;
}

＆＃13;

<a onclick="return toggleMe('content1', this)" aria-expanded="false">Expand content</a>

<div style="display: none" id="content1">
    <p>Expanded content here</p>
</div>

＆＃13;

香草javascript更改此数据属性

2 个答案: