为什么这个jQuery代码创建了“X-button”的许多副本？

-1

我找不到问题。为什么当我关闭红色图层并再次单击第一个按钮时，此代码会制作许多“X”按钮的副本？为什么这个jQuery代码创建了“X-button”的许多副本？

我以为init就像一个恰当的构造函数一样运行一次，对吧？

这里是说明问题的jsfiddle：

感谢您的时间！

的HTML：

<div class="Main"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Phasellus non nisl mauris. Phasellus eget viverra mi. 
     Curabitur elementum tristique nibh, et faucibus eros 
     fermentum ut. Pellentesque non nisi augue. 
     Nulla facilisis ultrices malesuada. Sed bibendum lacus 
     sed lorem auctor rutrum. 
     iam semper justo id diam 
    </p> 
    <p id="last_child" > Lorem ipsum dolor 
     sit amet, consectetur adipiscing elit. 
     Phasellus non nisl mauris. Phasellus eget viverra mi. 
     Curabitut interdum velit ultricies. 
    </p> 
    <div id="layer_on" ></div> 
</div>

jquery的代码：

(function(){ 

    $('html').addClass('js'); 

    //var red_layer; 
    var red_layer = { 
     red_box: $('#layer_on'), 

     init: function() { 
      $('<button></button>', { 
       text: 'push me' 
      }).insertAfter('.Main #last_child').on('click', this.show); 
     }, 

     show: function() { 
      red_layer.close.call(red_layer.red_box); 
      red_layer.red_box.show(); 
     }, 

     close: function() { 
      var $this = $(this); 
      $('<span class="close">X</span>').prependTo(this).on('click', function() { 
       $this.hide(); 
      }); 
     } 
     //anonymous function 

    }; // red_layer object ends 

    red_layer.init(); //We call it back (the function) 

})();

来源

2012-03-27 YoniGeek

把它放在jsFiddle上会非常有帮助 – 2012-03-27 16:56:52

@Brian它是！点击“这里” – YoniGeek 2012-03-27 16:59:30

为什么不在init方法中添加关闭按钮？你只需要添加一次按钮。实际上，您每次显示该框时都会添加X按钮。每次点击push me时，您都会拨打show()，然后调用.close()，这会将另一个X加到框中。取而代之的是，从你的init函数调用close：

var red_layer = { 
    red_box: $('#layer_on'), 

    init: function() { 
     // Console.log(this); 
     $('<button></button>', { 

      text: 'push me' 

     }).insertAfter('.Main #last_child') 
       .on('click', this.show); 

     red_layer.close.call(red_layer.red_box); // <--- HERE 
    }, 

    show: function() { 
     // NOT HERE 

     red_layer.red_box.show(); 
    },

演示：http://jsfiddle.net/xwmVr/

我认为你close方法并不需要是一个方法。它只是增加了X按钮，这看起来像是一次性的事情。它在做什么也不明显。它似乎打电话close实际上会关闭框，但它不在这种情况下。

来源

2012-03-27 17:07:14

正好在INIT里面（因为它是唯一的构造函数吗？）：谢谢！ jQuery的语法让我疯狂（即时通讯还不习惯它...如何呈现方法和功能...... mm，mm – YoniGeek 2012-03-27 17:16:07

http://jsfiddle.net/mWghr/1/

基本上检查关闭按钮是否已经存在，那就不要prepend

if($this.find('.close').length == 0) {

来源

2012-03-27 16:59:36

哦谢谢....不知道你可以用这种方式检查...你在这里检查班级的长度？毫米，毫米 – YoniGeek 2012-03-27 17:06:26

每次点击时拨打电话以添加按钮并没有用，但除第一次以外全部阻止。这是'init'方法的用途。 – 2012-03-27 17:15:40

@YoniGeek基本上检查'close'类是否已经存在，nvm tho，只要关注@ Jeff的'有用'解决方案 – 2012-03-27 17:17:01

由于您多次在关闭函数中追加span标记，因此会看到多个“x”。我重写了这样的关闭功能，并且它的工作原理非常完美。

close: function() { 
     var that = $(this); 
     that.html('<span class="close">X</span>'); 
     that.on('click', function() { 
      that.hide(); 
     }); 
    }

来源

2012-03-27 17:08:45

这将用一个关闭按钮替换框中的任何内容。 – 2012-03-27 17:16:24

为什么这个jQuery代码创建了“X-button”的许多副本？

回答

相关问题