はJavaScriptでARIA-拡大値を取得しようとしているが、「未定義」になっ

Question

私はaria-expandedがtrueかfalseであるかどうかに応じて<span>タグのクラスを変更しようとしているが、それは働いていないので、代わりに「未定義」を返すように見えます。

これは私の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>