试图在javascript中获取aria扩展值，但获取“未定义”

Question

我试图根据aria-expanded是true还是false来更改<span>标记的类，但是它似乎返回“ undefined”，因此它不起作用。

这是我的javascript：

$(function () {
    if ($('#tester').attr('aria-expanded') === 'true') {
       $("#testerTwo").toggleClass("glyphicon-eye-close glyphicon-eye-open");
    }
});

我的html看起来像这样（使用引导程序）：

<div class="col-sm-6">
    <a id="tester" data-toggle="collapse" href="#collapsible" aria-expanded="false">
        <h3><span class="glyphicon glyphicon-star"></span> Extra <span id="testerTwo" class="glyphicon glyphicon-eye-close"></span></h3>
    </a>
    <div class="collapse" id="collapsible">
        <div class="card card-block">
            <ul>
                <li><a href="#">item 1</a></li>
                <li><a href="#">item 2</a></li>
                <li><a href="#">item 3</a></li>
                <li><a href="#">item 4</a></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

您可以将其更改为单击功能，可以使用所需的选择器代替h3。 希望能帮助到你：

 $(function () { $("h3").click(function () { $("#testerTwo").toggleClass("glyphicon-eye-close glyphicon-eye-open"); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="col-sm-6"> <a id="tester" data-toggle="collapse" href="#collapsible" aria-expanded="false"> <h3><span class="glyphicon glyphicon-star"></span> Extra <span id="testerTwo" class="glyphicon glyphicon-eye-close"></span></h3> </a> <div class="collapse" id="collapsible"> <div class="card card-block"> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </div> </div> </div>