Question

我希望在点击它时将div从一个父div转移到另一个div。

请查看以下jsfiddle页面以获取参考资料

我想转移任何一方的div，当我点击灰色的任何div时，它会迁移到其他div框，当我点击返回红色div时它将样式更改为红色它应该回到原来的灰色样式

我怎样才能实现这个目标？

HTML：

<div class="section1">
    <div id="1" >1</div>
    <div id="2" >2</div>
    <div id="3" >3</div>
    <div id="4" >4</div>
    <div id="5" >5</div>
    <div id="6" >6</div>
    <div id="7" >7</div>
    <div id="8" >8</div>
</div>

<div class="section2"></div>

CSS：

.section1 div{height:25px; background-color:#333; color:#FFF; border:1px solid red; margin-bottom:2px; width:50px;}

.section2 div{height:25px; background-color:red; color:yellow; border:1px solid green; margin-bottom:2px; width:150px;}

.section1{float:left; margin-right:50px;}
.section2{float:left}

我的JavaScript：

$(document).ready(function() {
    function testclick() {
        var iLoc = $(this).attr("id");
        $('.section2').append(this);
        $('#'+iLoc).unbind('click', testclick);
    }

    function testclick2() {
        alert("s");
        var iLoc = $(this).attr("id");
        $('.section1').append(this);
        this.unbind('click', testclick2);
    }
    $('.section1 div').bind('click', testclick);
    $('.section2 div').bind('click', testclick2);


});

Answer 1

变化：

$('.section1 div').bind('click', testclick);
$('.section2 div').bind('click', testclick2);

向

$('.section1 div').live('click', testclick);
$('.section2 div').live('click', testclick2);

您现在可以从功能中删除.unbind()。

保持职位：

$(document).ready(function() {
    $('.section1 div').each(function(){
        $(this).data("pos", $(this).index());    
    });

    function testclick() {
        var node = $(this);
        var success = false;
        $('.section2 div').each(function(){
            if($(this).data("pos") > node.data("pos"))
            {
                $(this).before(node);
                success = true;
                return false;   // Jump out of loop
            }
        });

        if(!success)
        {
            $('.section2').append(node);
        }
    }

    function testclick2() {
        var node = $(this);
        var success = false;
        $('.section1 div').each(function(){
            if($(this).data("pos") > node.data("pos"))
            {
                $(this).before(node);
                success = true;
                return false;  // Jump out of loop
            }
        });

        if(!success)
        {
            $('.section1').append(node);
        }
    }
    $('.section1 div').live('click', testclick);
    $('.section2 div').live('click', testclick2);


});

保持职位的演示：http://jsfiddle.net/fb7Tq/109/

Answer 2

因为你有一个动态变化的DOM，事件委托应该尖叫你，而不是直接将事件处理程序绑定到元素。

作为一般规则，我不能想到异常，如果你有一个更改的DOM（例如通过AJAX，或者在你的例子中以编程方式）总是使用事件委托。

更改;

$('.section1 div').bind('click', testclick);
$('.section2 div').bind('click', testclick2);

要;

$('.section1').delegate('.section1 > div', 'click', testclick);
$('.section2').delegate('.section2 > div', 'click', testclick2);

然后，您可以删除点击处理程序中的两个unbind()方法，这样就可以with this;

$(document).ready(function() {
    function testclick() {
        var iLoc = $(this).attr("id");
        $('.section2').append(this);
    }

    function testclick2() {
        alert("s");
        var iLoc = $(this).attr("id");
        $('.section1').append(this);
    }

    $('.section1').delegate('.section1 > div', 'click', testclick);
    $('.section2').delegate('.section2 > div', 'click', testclick2);

});

哪个a）有效，而b）看起来更干净。

jQuery在1.7之前的jQuery版本中支持两种事件委托方法，我强烈建议您阅读这两种方法的完整文档;是的，它很长，但理解这个概念至关重要。

live()
delegate()

在jQuery 1.7中，引入了on()，live()和delegate()预计将在1.8版中弃用（最终将被删除），因此，您应该将我在示例中使用delegate()更改为;

    $('.section1').on('click', '.section1 > div', testclick);
    $('.section2').on('click', '.section2 > div', testclick2);

Answer 3

试试这个

http://jsfiddle.net/fb7Tq/104/

$(document).ready(function() {
    function testclick() {
        var iLoc = $(this).attr("id");
        $('.section2').append(this);
       $('#'+iLoc).unbind('click', testclick).bind('click',testclick2) ;
    }

    function testclick2() {
       alert("s");
       var iLoc = $(this).attr("id");
       $('.section1').append(this);
       this.unbind('click', testclick2).bind('click',testclick) ;
    }
    $('.section1 div').bind('click', testclick);
    $('.section2 div').bind('click', testclick2);

});

jQuery追加并添加div和click事件

3 个答案: