Не могу получить текущее значение арии, нажатой, выполнив .attr () - PullRequest
Новая
       77

Не могу получить текущее значение арии, нажатой, выполнив .attr ()

1 голос
/ 23 февраля 2020

Я использую этот bootstrap переключатель: https://codepen.io/aanjulena/pen/ZLZjzV

По сути, это повторное создание кнопки. Когда значение «включено», атрибут aria-pressed имеет значение true и наоборот. Вот так: 

<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(), но я не могу придумать, как это сделать, поскольку ничего, что я пробую, не работает.

Ответы [ 2 ]

0 голосов
/ 23 февраля 2020

Тип возвращаемого здесь значения атрибута - «строка» - вы можете проверить это с помощью typeof(). Если вы измените оператор if на добавление === 'true', оно должно работать. 

if($(this).attr('aria-pressed') === 'true'){
0 голосов
/ 23 февраля 2020

Ваш код для получения значения из атрибута 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 изменениями класса вместо 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

...