False True change attr by onclick jQuery

Question

我需要通过Oncklick更改数据属性" ARIA选择"。
但是这个脚本不起作用。你能帮我吗？

<a href="#" aria-selected="true" resource="">SHOW/HIDE</a>

这是我的代码：

<script>
$(document).ready(function($){
  $("a").attr("aria-selected","false");
  $(" ul li a").addClass("accordion");
  $('.accordion').click(function() {
    if ($(this).attr('aria-selected')) {
      $(this).attr("aria-selected","true");
    } 
    else {
      $(this).attr("aria-selected", "false");
    }
  });
});
</script>

Answer 1

aria-selected是字符串...不是布尔值。
因此，您必须将其与字符串进行比较。

<script>
$(document).ready(function($){
  $("a").attr("aria-selected","false");
  $(" ul li a").addClass("accordion");
  $('.accordion').click(function() {
    if ($(this).attr('aria-selected') == "false") {  // Change is here.
      $(this).attr("aria-selected","true");
    } 
    else {
      $(this).attr("aria-selected", "false");
    }
  });
});
</script>

Answer 2

if ($(this).attr('aria-selected')) {

应该是

if ( !$(this).attr('aria-selected') ) {

您将明确将aria-selected设置为页面上的false。当单击具有accordion类的元素时，您似乎要切换属性值。但是在您的情况下，它将始终设置为false，原因是您现有的if条件。

您可以修改代码以使其有点清洁

$("a").attr("aria-selected", "false");
$(" ul li a").addClass("accordion");
$('.accordion').click(function(e) {
  e.preventDefault();
  
  var $this = $(this);
  var currentValue = $this.attr('aria-selected');
  
  $this.attr('aria-selected', !(currentValue === 'true'));
});

[aria-selected="true"] {
  color: green;
}
[aria-selected="false"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
  <a href="#" aria-selected="true" resource="">SHOW/HIDE</a>
</li>
<li>
  <a href="#" aria-selected="true" resource="">SHOW/HIDE</a>
</li>
<li>
  <a href="#" aria-selected="true" resource="">SHOW/HIDE</a>
</li>
</ul>