用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'），並且只有正在執行的事件被綁定。

爲什麼不創建一個單獨的arrow_down按鈕，並使用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'); 
});