Question

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

请帮忙

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加载的那一刻。因此，$（＆＃39; .arrow_up＆＃39;）已经定义，$（＆＃39; .arrow_down＆＃39;）不是。 button元素已初始化为$（＆＃39; .arrow_up＆＃39;），只有与之绑定的事件正在执行。

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

Answer 2

不要过于复杂化。向下箭头使用不同的div。

这是一个让你乱七八糟的小提琴。你的工作根本没有。

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

用jquery替换图像和类

2 个答案: