Замена изображения и класса с помощью jquery

Question

Я использую код для замены изображения и добавления/удаления классов с помощью jquery, когда что-то нажата. Когда вы нажимаете первый раз, когда он работает нормально, но когда вы нажимаете второй раз, он делает то же самое, что и первая команда щелчка jquery, даже если команды щелчка вызываются на основе классов, которые добавляются и удаляются. В моем примере просто найдите, где курсор превратится в указатель, затем щелкните по его середине в середине, когда вы нажмете кнопку, она переместится над курсором, когда вы нажмете кнопку, и она исчезнет, ​​но появится одно и то же изображение.

Пожалуйста, помогите

DEMO

//on arrow up click 
//fade page out 
//replace with open nav 

$('.arrow_up').bind('click',function() { 
    $('.bg').fadeOut(500); 
    setTimeout(function(){ 
    $('.bg').attr('src', 'other_files/images/bg_open_nav.png'); 
    }, 500); 
    $('.bg').fadeIn(500); 
    $('.arrow').removeClass('arrow_up').addClass('arrow_down'); 
}); 

//on arrow down click 
//fade page out 
//replace with closed nav 

$('.arrow_down').bind('click',function() { 
    $('.bg').fadeOut(500); 
    setTimeout(function(){ 
    $('.bg').attr('src', 'other_files/images/bg.png'); 
    }, 500); 
    $('.bg').fadeIn(500); 
    $('.arrow').removeClass('arrow_down').addClass('arrow_up'); 
}); 

Answer 1

Я думаю, что ваш JS уже скомпилирован в тот момент, DOM был загружен. Таким образом, $ ('. Arrow_up') уже определен, а $ ('. Arrow_down') - нет. Элемент кнопки инициализирован как $ ('. Arrow_up'), и выполняются только связанные с ним события.

Почему бы вам не создать отдельную кнопку для стрелки и использовать CSS для обработки, отображается ли она или нет. Должно решить вашу проблему

Answer 2

Не переусердствуйте. Используйте другой div для стрелки вниз.

Вот вам скрипка js, с которой вы можете возиться. Твой не работает вообще.

https://jsfiddle.net/kdyLc4om/

</div> 

    <div class="nav"> 
     <div class="arrow_up arrow">UP</div> 
     <div class="arrow_down arrow">DOWN</div> 
    </div> 
    <img src="http://vk.com/images/gifts/256/70.jpg" class="bg" /> 
</div> 

JS:

//on arrow up click 
//fade page out 
//replace with open nav 

$('.arrow_up').click(function() { 
    $('.bg').fadeOut(500); 
    setTimeout(function(){ 
    $('.bg').attr('src', 'http://vk.com/images/gifts/256/78.jpg'); 
    }, 500); 
    $('.bg').fadeIn(500); 
    //$('.arrow').removeClass('arrow_up').addClass('arrow_down'); 
}); 

//on arrow down click 
//fade page out 
//replace with closed nav 

$('.arrow_down').click(function() { 
    $('.bg').fadeOut(500); 
    setTimeout(function(){ 
    $('.bg').attr('src', 'http://vk.com/images/gifts/256/70.jpg'); 
    }, 500); 
    $('.bg').fadeIn(500); 
    //$('.arrow').removeClass('arrow_down').addClass('arrow_up'); 
});