[英]Trying to get aria-expanded value in javascript but getting “undefined”
I'm trying to change the class of a <span>
tag depending on whether aria-expanded
is true
or false
but it seems to return "undefined" instead so it's not working. 我试图根据aria-expanded
是true
还是false
来更改<span>
标记的类,但是它似乎返回“ undefined”,因此它不起作用。
This is my javascript: 这是我的javascript:
$(function () {
if ($('#tester').attr('aria-expanded') === 'true') {
$("#testerTwo").toggleClass("glyphicon-eye-close glyphicon-eye-open");
}
});
And my html looks like this (using bootstrap): 我的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>
You can change it to click function, you can use selector you want instead of h3. 您可以将其更改为单击功能,可以使用所需的选择器代替h3。 Hope it helps: 希望能帮助到你:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.