Question

有人可以看看这个并告诉我我做错了什么。这是一个带有类move.up的范围，点击.content-wrapper元素将移动，.move.up将更改类名称改为.move.dwn 以后move.dwn.click(function()应该开始，但我永远无法达到这一点，为什么？

 <style type="text/css">
    .content-wrapper {
        height:100px;
        width:100px;
        background-color:orange;
        position:relative;
    }
    span.move {
        background-color:fuchsia;
        cursor:pointer;
    }
</style>

<span class="move up">click here</span>
<div class="content-wrapper"></div>

<script type="text/javascript">
    $(document).ready(function() {

        $('.move.up').click(function() {
            alert("up");
            $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
            $(this).removeClass('up');
            $(this).addClass('dwn');
        });

        $('.move.dwn').click(function() {
            alert("dwn");
            $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
            $(this).removeClass('dwn');
            $(this).addClass('up');
        });
    });

</script>

Answer 1

您正在项目位于dom之前添加点击事件。将click事件侦听器添加到父节点，它们将在它们冒泡时执行。

$(document).ready(function() {
    $(document).on('click', '.move.up', function(){
        alert("up");
        $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    }).on('click', '.move.dwn', function(){
        alert("dwn");
        $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    });
});

Answer 2

由于您的$('.move.dwn').click(function() {与页面加载时可能存在或不存在的$('.move.dwn')元素相关联，因此您需要绑定到文档加载时可用的其他元素。我将改变这两个功能，如下所示

<script type="text/javascript">
$(function() {
    $(body).on('click', '.move.up', function() {
        alert("up");
        $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    });

    $(body).on('click', '.move.down', function() {
        alert("dwn");
        $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    });
 });
</script>

Answer 3

你使用的是什么jQuery版本？

如果您使用的是1.8版本，这可能会对您有所帮助：

$('.move').on("click", function() {
    if($(this).hasClass('up')) {
         $('.content-wrapper').animate({
            'left': '+=568px'
        }, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    }
    else {
        $('.content-wrapper').animate({
            'left': '-=568px'
        }, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    }

});

示例（将距离更改为100 px以便于查看）： http://jsfiddle.net/XWyZD/1/

Answer 4

你的问题在于.click（）函数没有更新它们所绑定的元素。幸运的是，jQuery在on（）（之前的live（））中有一个解决方案。这将动态绑定您的事件，在更新后它仍然会在课程上选择。

试试这个：

<script type="text/javascript">
$(document).ready(function() {

    $('.move.up').on('click', function() {
        alert("up");
        $('.content-wrapper').animate({'left': '+=568px'}, 'slow');
        $(this).removeClass('up');
        $(this).addClass('dwn');
    });

    $('.move.dwn').on('click', function() {
        alert("dwn");
        $('.content-wrapper').animate({'left': '-=568px'}, 'slow');
        $(this).removeClass('dwn');
        $(this).addClass('up');
    });
});

更改多个类名的jQuery动画不起作用

4 个答案: