False True 通过单击更改属性 jQuery

Question

我需要通过 oncklick 更改数据属性 "aria-selected"。
但是这个脚本不起作用。你能帮帮我吗？

<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

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

应该是

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

您在页面加载时明确将 aria-selected 设置为 false。单击带有 accordion class 的元素时，您似乎切换了属性值。但在您的情况下，它将始终设置为 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>

Answer 2

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>

False True 通过单击更改属性 jQuery

False True change attr by onclick jQuery

javascript

jquery

onclick

toggle

attr