试图让JavaScript的咏叹调扩展值，但得到“未定义”

我试图改变类视aria-expanded是true或false一个<span>标签，但它似乎返回“未定义”代替它不工作。试图让JavaScript的咏叹调扩展值，但得到“未定义”

这是我的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>

来源

2017-05-30 frequent_sleeper

您的代码工作。你有什么问题？ –

@Dinesh它不适合我。当我尝试'alert（$（this）.find（'a [aria-expanded]'）。attr（'aria-expanded'））;'它说“未定义”，我认为这就是为什么它不起作用。不知何故，它无法读取状态是“真”还是“假” –

检查此小提琴https://jsfiddle.net/nfmwaeyt/其工作 –

你可以改变它点击功能，你可以使用选择你想要的，而不是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>

来源

2017-05-30 12:01:32 SilverSurfer

谢谢，这是一个很好的解决方法。（虽然我仍然有点困惑，为什么我的方式不起作用。） –

因为你在使用一个元素，在你的代码中，你正在检查aria是否为false或true，但是什么时候？你需要检查每次点击你在做什么，在这种情况下，toggleclass已经足够了，我希望它能帮助你。 – SilverSurfer

啊，这很有道理。谢谢！我仍然是一个新手，所以我仍然需要更多地研究它 –

试图让JavaScript的咏叹调扩展值，但得到“未定义”

回答

相关问题