如何通过 jQuery 设置 `aria-selected=true`答案

【问题标题】：How to set `aria-selected=true` via jQuery如何通过 jQuery 设置 `aria-selected=true`
【发布时间】：2018-10-19 11:14:41
【问题描述】：

如何使用 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)

【问题讨论】：

标签： jquery dom wai-aria

【解决方案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() 方法仅获取匹配集中第一个元素的属性值。它为尚未设置的属性的值返回 undefined

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

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

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

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

【讨论】：

【解决方案2】：

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

这将解决你的目的

【讨论】：

【解决方案3】：

要解决的普通 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

【讨论】：

【解决方案4】：

以下解决方案适用于 jQuery：

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

【讨论】：