0

有人可以看看这个并告诉我我做错了什么。这是一个带有 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>
4

4 回答 4

1

由于您$('.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>
于 2013-01-24T16:19:05.320 回答
1

你使用的是什么 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 像素以使其更易于查看）：http: //jsfiddle.net/XWyZD/1/

于 2013-01-24T16:19:09.677 回答
1

您在项目位于 dom 之前添加点击事件。而是将单击事件侦听器添加到父级，它们会在冒泡时执行。

$(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');
    });
});
于 2013-01-24T16:18:05.657 回答
0

您的问题在于 .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');
    });
});

于 2013-01-24T16:19:23.953 回答