If Else Jquery, как правильно задать условия, чтобы в зависимости от одного значения, автоматически менялось другое?

Question

[Shakhrom Mukumov]

Всем привет, я начинаю путь веб-разработки, просьба не кидать камни в огород.

Суть вопроса, сделал обычный видео-плеер HTML5, скрыл элементы управления, сделал отдельно кнопку (mute/unmute), через css загрузил в качестве png 2 состояния (mute/unmute), в JQuery сделал функцию по клику (mute/unmute) чтобы была смена изображения (вкл/выкл) и соответственно звук тоже (вкл/выкл). А как сделать чтобы при изменении начальных настроек (mute - true/false), менялось и само значение кнопки (mute/unmute)? Надеюсь смог объяснить саму суть вопроса. Вот готовый пример: Video mute

Первая строка, от которой должна зависеть состояние кнопки при первой загрузке: $("video").prop('muted', false/true)

Comments

[Kovalsky]

А как сделать чтобы при изменении начальных настроек (mute - true/false)

То есть при нажатии на кнопку, да?

менялось и само значение кнопки (mute/unmute)?

А вот это я не понял. Значение кнопки?

[Kovalsky]

Ааа, вы имеете в виду отслеживать программное изменения режима mute?

[Shakhrom Mukumov]

Никита Полевой: при нажатии кнопки всё работает, а вот если при изменении в первой строке с false на true, то кнопка не меняет состояние, допустим звук есть, а кнопка в режиме (выкл), т.е. не меняется состояние

[Shakhrom Mukumov]

Никита Полевой: да, вот вы и правильно сформулировали ))

[Shakhrom Mukumov]

Никита Полевой: Огромное спасибо, но можно как-то подружить чтобы и volumechange и смена при клике работала не конфликтуя? Сделал как вы ответили, добавил в volumchange if/else, чтобы определил в зависимости от mute (true/false), но в таком раскладе смена без остановки (выкл/вкл), может я что-то делаю не так?

[Kovalsky]

Shakhrom Mukumov: изменил ответ, читайте спойлер, задавайте вопросы.

[Shakhrom Mukumov]

Никита Полевой: крутотень, это просто магия, огромнейшее спасибо, блин когда я дорасту до такого уровня ... Сложно мне удаётся JS/JQuery... Еще раз благодарю за помощь!

[Kovalsky]

Shakhrom Mukumov: ну если вы считаете, что это сложно, то на самом деле нет же, мы просто 1) кешируем элементы, 2) вешаем обработчики, 3) устанавливаем дефолтное значение для muted

Обработчики разделены - по клику на кнопку меняется muted, а по смене muted меняются стили для кнопки.

К слову, я сразу же увидел одну большую ошибку в этом коде, она здесь: $video.on('volumechange', changeButtonStyle);. Volumechange будет срабатывать в том числе просто по изменению громкости, стили кнопки будут меняться без всякого смысла.

[Shakhrom Mukumov]

Никита Полевой: На счет сложности спорно (если ты начинающий), надо понять саму суть, как всё работает. То же самое с машинами, у всех (многих) авто 4 колеса; капот; багажник; двери и т.д., везде чтобы разобрать или прикрутить, нужны болты+гайки+инструменты и понимать в какую сторону крутить, тот кто чинил Жигуль, сможет додуматься починить и иномарку. А что касается элементов управления, то кроме mute/unmute ничего не будет, т.к. видео будет использоваться в качестве видеофона, а там выбор mute/unmute и всё.

Answer 1

[Kovalsky]

Событие volumechange:

$('video').on('volumechange', function() {
  console.log('volume has changed');
})

Пример

var $video = $('video'), $btn = $('.btn');

$btn.on('click', toggleMuteState);
$video.on('volumechange', toggleButtonClasses);

$video.prop('muted', false);

function toggleMuteState() {
	$video.prop('muted', !$video.prop('muted'));
}

function toggleButtonClasses() {
	$btn.toggleClass('mute unmute');
}