用 jquery 替换图像和类

Replacing image and class with jquery

本文关键字：图像 替换 jquery      更新时间：2023-09-26

我正在使用代码来替换图像，并在单击某些内容时用jquery添加/删除类。当您第一次单击时，它可以正常工作，但是当您第二次单击时，它执行与第一个jquery单击命令相同的操作，即使单击命令是根据添加和删除的类调用的。在我的示例中，只需找到光标变成指针的位置，然后单击，它朝向底部中间，当您单击按钮时，它将移动到光标上方，当您单击时，它将淡出并进入，但会出现相同的图像。

请帮忙

演示

//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');
});

我认为您的 JS 已经在 DOM 加载的那一刻编译了。因此，$（'.arrow_up'） 已经定义，而 $（'.arrow_down'） 没有。按钮元素已初始化为 $（'.arrow_up'），并且仅执行绑定到该元素的事件。

为什么不为arrow_down创建一个单独的按钮，并使用CSS来处理它是否显示。 应该解决你的问题

不要把事情复杂化。使用不同的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');
});
相关文章：