выполнить код в зависимости от состояния кнопки

Question

Я ужасный новичок, когда дело доходит до jquery, и я пытаюсь создать меню (состоящее из нескольких div с тем же классом), которое воспроизводит уникальный звук при наведении. эта часть работает благодаря some help from here.

теперь я бы дополнительно хотел бы добавить переключатель (не флажок) где-то на этой странице, отключающего эту функцию в зависимости от его состояния (например, на выключенном переключателе)

вот как я сделать звуко- часть:

<div class="trigger"> 
    <audio class="sound" preload="auto"> 
     <source src="sound1.mp3"></source> 
     <source src="sound1.ogg"></source> 
    </audio> 
</div> 

<div class="trigger"> 
    <audio class="sound" preload="auto"> 
     <source src="sound2.mp3"></source> 
     <source src="sound2.ogg"></source> 
    </audio> 
</div> 

JQuery:

$('.trigger').hover(
    function() { 
     sound = $(this).children()[0]; 
     sound.play(); 
    }, function() { 
     sound.pause(); 
     sound.currentTime = 0; 
    } 
); 

, как для тумблер кнопки части, я полагаю, я бы нужно что-то вроде этого .. если да, то я понятия не имею, как «смешивать» две функции:

$("#toggle_button").click(function(){ 
    if($("#OnOffDiv").hasClass("On")) 
    { 
     $("#OnOffDiv").removeClass("On"); 
     $("#OnOffDiv").addClass("Off"); 
     DO SOMETHING 
); 

    } 
    else 
    { 
     $("#OnOffDiv").removeClass("Off"); 
     $("#OnOffDiv").addClass("On"); 
     $("#OnOffDiv").html("ON"); 
     DO SOMETHING ELSE 
    } 
}); 

Я был бы рад за любую помощь.

Answer 1

Вы можете обрезать вниз, что переключать часть сценария с помощью toggleClass():

$("#toggle_button").click(function() { 
    $('#OnOffDiv').toggleClass('on off').text($('#OnOffDiv').attr('class')); 
}); 

И тогда на вашем случае зависания, просто проверить, если $('#OnOffDiv').hasClass('on'):

$('.trigger').hover(function() { 
    if ($('#OnOffDiv').hasClass('on')) { 
     sound = $(this).children()[0]; 
     sound.play(); 
    } 
}, function() { 
    sound.pause(); 
    sound.currentTime = 0; 
}); 

Answer 2

Прежде всего, вам просто нужно css правило, когда кнопка включена, так как вы должны иметь правило, установленное для кнопки в состоянии по умолчанию. Итак, теперь у вас должно быть:

$("#toggle_button").click(function(){ 
    $("toggle_button").toggleClass("on"); 
}); 

Alos, вам действительно не нужен целый div, чтобы хранить эту информацию. Обратите внимание, как этот код меняет класс toggle_button, а не OnOffDiv.

Вы что-то заметили сейчас? Когда toggle_button включен, он имеет класс on. Когда он переключается, это не так. Это означает, что вы можете использовать toggle_button как переменную!

Итак, если $(#toggle_button).hasClass("on") возвращает true, ваш код наведения должен работать. Когда hasClass("on") возвращает false, он ничего не должен делать или обрабатывать зависание по-другому.

Поскольку вы новичок, я дам вам окончательный вариант кода самостоятельно, чтобы вы могли учиться на нем. Я дал вам все, что нужно, чтобы заставить его работать. Если вы действительно не можете решить это самостоятельно, просто отправьте комментарий, и я дам вам решение.