0

我有三个具有左、中和右类的 div，我想交换它们的位置并在它们进入新位置时应用新的类。但由于某种原因它不起作用这是我的脚本：

$(function() {
            $(".left").css("left","50px");
            $(".center").css("left","300px");
            $(".center").css("width","300px");
            $(".center").css("height","300px");
            $(".center").css("top","25px");
            $(".right").css("left","650px");
            $(".right").click(function(){
                $(".left").animate({
                    left: '650px'
                    }, 1000, function() {
                    });
                $(".center").animate({
                    left: '50px',
                    width: '200px',
                    top: '75px',
                    height: '200px'
                    }, 1000, function() {
                    });
                $(".right").animate({
                    left: '300px',
                    width: '300px',
                    height: '300px',
                    top: '25px'
                    }, 1000, function() {
                    });
                $(".bule").removeClass("left right center");
                $(".second").addClass("left");
                $(".third").addClass("center");
                $(".first").addClass("right");
                $(".bule").removeClass("first second third");
                $(".left").addClass("first");
                $(".center").addClass("second");
                $(".right").addClass("third");
                });
        });

这是一个工作示例。

4

1 回答 1

4

当您使用 jQuery 选择器选择元素时$('...')- 对选择进行评估并对​​这些元素执行以下操作。如果稍后，您删除了一个类或更改了选定元素的 ID，则这些操作已经被执行 - 所以它们会保留。同样，它们不会自动从其他选择器继承操作（因为在进行选择时它们没有该类/ID）。

如果您想绑定一次事件，并在添加新元素或更改类时让它们工作，您需要使用稍微不同的事件语法：

$('body').on('click', '.right', function() {

});

注意选择器现在是 body 元素（因为在运行时 body 元素将始终存在）。您在这里告诉 jQuery 是将click事件绑定到<body>元素，并且当单击的子级时<body>，根据表达式评估元素.right。如果该表达式匹配，请调用我的函数。

此方法利用了 javascript 事件传播，其中事件一直冒泡到它们的最高祖先。这意味着单击 div 内的链接将按此顺序触发链接、div 和正文的单击事件。

于 2013-02-08T13:49:00.890 回答