false通過onclick jQuery的真正改變attr

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

的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>