如何通过jQuery设置"aria-selected=true"

Question

如何使用jQuery将aria-selected="false"的状态更改为aria-selected="true"？

在这里你可以看到我是如何尝试这样做的：

$('element aria-selected').html(true)
$('element aria-selected').text(true)
$('element aria-selected').val(true)
$('element').attr('aria-selected', 'true').prop('selected', true)
$('element').attr('aria-selected', 'true')
$('element').prop('selected', true)

Answer 1

只有prop()或attr()才能aria-selected属性设置为true

正确的代码是：

$('element').prop('aria-selected', true);

或

$('element').attr('aria-selected', true);

有关每个属性的更多详细信息：

如果元素是容器，如div、p、h1、b、a等，则需要使用html()html(( 方法设置或返回所选元素的内容 (innerHTML(。

• $('element aria-selected').html(true)

所以html()在这里行不通。

如果元素是容器，如div、p、h1、b、a等，则需要使用text()与 .html(( 方法不同，.text(( 可以在 XML 和 HTML 文档中使用。.text(( 方法的结果是一个字符串，其中包含所有匹配元素的组合文本。

• $('element aria-selected').text(true)

所以text()在这里行不通。

如果元素是输入字段，如文本，隐藏等，则需要使用val()

• $('element aria-selected').val(true)

所以val()在这里行不通。

prop(( 方法设置或返回所选元素的属性和值。 .prop(( 方法仅获取匹配集中第一个元素的属性值。它为尚未设置的属性的值返回未定义

• $('element').attr('aria-selected', 'true').prop('selected', true)
• $('element').prop('selected', true)

attr(( 方法设置或返回所选元素的属性和值。

• $('element').attr('aria-selected', 'true')

所以attr()会在这里工作。

Answer 2

$('element').attr('aria-selected',true);

这将解决您的目的

Answer 3

要解决的 Vanilla JavaScript 代码：

var elem = document.querySelector("yourSelector");
elem.setAttribute('aria-selected', false); //If attribute is true, and false needed
elem.setAttribute('aria-selected', true); //If attribute is false, and true needed

Answer 4

以下解决方案将适用于jQuery：

$('element').prop('ariaSelected', false);
$('element').prop('ariaSelected', true);