False True change attr onclick jQuery

Question

データ属性 "aria-selected"をoncklickで変更する必要があります。
ただし、このスクリプトは機能しません。私を手伝ってくれますか？

<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

それは少しきれいにするために、コードを変更することができます。
文字列と比較する必要があります。

<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')) { 

あなたが明示的にページの負荷にfalseにaria-selectedを設定していることになっています。 accordionクラスの要素をクリックすると、属性値を切り替えるようです。しかし、あなたのケースでは、それは常にあなたの既存のif状態の原因で、falseに設定されます。

あなたはaria-selectedは、文字列...ないブール値です

$("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>