无法通过执行 .attr() 获取 aria-pressed 的当前值

Question

我正在使用这个 bootstrap 开关：https://codepen.io/aanjulena/pen/ZLZjzV

本质上它是重新设计一个按钮。每当值为 "on" 时，aria-pressed 属性为真，反之亦然。像这样：

<button id="packagesSwitch" type="button" class="btn btn-toggle my-3 pkgSwitch" data-toggle="button" aria-pressed="false" autocomplete="off">
                            <div class="handle"></div>
                        </button>

我正在尝试通过 jquery 获得此值：

$('.pkgSwitch').click(function(){

                if($(this).attr('aria-pressed')){
                    console.log("true");
                    $('#packageSwitchValue').val(1);
                }else{
                    console.log("false");
                    $('#packageSwitchValue').val(0);
                }
            });

然而它似乎根本不起作用。我意识到 .attr 给了我原始值，我尝试以某种方式使用 .prop() 但我想不出这样做的方法，因为我尝试的任何方法都不起作用。

Answer 1

您从 aria-pressed 属性获取值的代码似乎工作正常。但是，该值实际上是一个字符串，因此必须以不同的方式对其进行评估。还要记住，对 DOM 的每次调用都必须在 load 事件在文档上触发后完成，以确保一切都准备好查询。否则，jQuery 将无法找到所需的节点：

$(function() {
  $('.pkgSwitch').click(function(){
    if($(this).attr('aria-pressed') === "true"){
      console.log("true");
      $('#packageSwitchValue').val(1);
    }else{
      console.log("false");
      $('#packageSwitchValue').val(0);
    }
  });
});

然而，data-toggle 行为似乎在触发 click 事件后更新节点属性，导致不可预测的结果（有时可能是真或假，因为在节点上注册的侦听器没有顺序).也许添加一些去抖动或只是一个简单的 setTimeout 可以解决这个问题。此外，您必须注意 active class 更改而不是 aria-pressed，因为这是一个仅可访问性参数。

const WAIT_MS = 50;

function onToggleUpdate($elem, cb) {
  setTimeout(() => cb($elem.hasClass("active")), WAIT_MS);
}

function cb(val) {
  console.log(!!val ? "true" : "false");
}

$(function() {
  $('.pkgSwitch').click(function() {
    onToggleUpdate($(this), cb);
  });
});

我附上了一个 CodePen，概念有效：https://codepen.io/geekzolanos-dev/pen/YzXpdzV

Answer 2

这里返回的属性值的类型是 'string' - 你可以用 typeof() 来检查。如果您更改 if 语句以添加 === 'true' 它应该可以工作。

if($(this).attr('aria-pressed') === 'true'){

无法通过执行 .attr() 获取 aria-pressed 的当前值

Can't get the current value of aria-pressed by doing .attr()

jquery

togglebutton

bootstrap-4