Как сделать "если все с кнопки с val="off", то..."?

Question

[MisTFoR]

Здравствуйте!
Я использую JQuery
У меня есть кнопки:

<button class="all_water" val="off">
    <span>Кнопочка</span>
</button>

<button class="pr_water" val="off">
    <span>Кнопочка</span>
</button>
<button class="pr_water" val="off">
    <span>Кнопочка</span>
</button>
<button class="pr_water" val="off">
    <span>Кнопочка</span>
</button>

У меня есть скрипт который, при нажатии на кнопку меняет val="off" на val="on" и так же в обратную сторону.
Не могу додуматься как сделать так - что если все кнопки класса "pr_water" с val="off", то кнопка класса "all_water" менялась с val="off" на val="on".

Comments

[Сергей Сергей]

document.querySelectorAll( 'button.pr_water[val="off"]' ).length === 3

[Сергей Соколов]

Покажите скрипт. который меняет on на off.
Хорошо бы именно в нём при переключении и проверять остальных.

[MisTFoR]

Сергей Соколов, так как я чайник, писал своими руками)

$('.pr_water').click(function(){
  if($(this).attr('val')=='off'){
    $(this).attr('val', 'on');
  } else
  if($(this).attr('val')=='on'){
    $(this).attr('val', 'off');
  }
});

Answer 1

[Надим]

$('button.pr_water').click(function() {
    if ($('button.pr_water[val="off"]').length === $('button.pr_water').length) {
        $('button.all_water').attr('val', 'on');
    }
});

Comments

[Сергей Соколов]

зависит от порядка срабатывания слушателей: если тот, что переключает значения on / off окажется позже, всё пропало )

[Надим]

Сергей Соколов, тоже верно. Тут вижу 2 решения, использовать небольшой таймаут, либо использовать не слушатели кликов, а MutationObserver, чтобы видеть уже фактиечские изменения.

[MisTFoR]

Это работает, спасибо!