Question

我正在尝试动态地为html元素添加花哨的关闭按钮

代码是：

function add_close_box(element,img_close_box,base_url_close_box){

   var i;
    $.each($('.'+element),function(i){

     $(this).addClass('close_box'+i);
     var x = $('.close_box'+i).offset().left;
     var y = $('.close_box'+i).offset().top;

    $('body').append('<a href="javascript:void(0)" class="img_close_box_'+i+'"><img src="'+base_url_close_box+img_close_box+'"></a>');
    $('.img_close_box_'+i).css({'position':'absolute','top':y-10,'left':x+$('.close_box'+i).width()-20});
    $('.img_close_box_'+i).live('click',function(){

    var hei = $('.'+element).height();
    $('.img_close_box_'+i+','+'.close_box'+i).hide();
   $.each('.'+element,function(e){ 
       $('.img_close_box_'+(e)).animate({
          'top':'-='+hei
       },0);
   });



  });
    });


}

它工作正常但是当点击按钮并且元素是fadeOut（）时其他关闭按钮不遵循它们自己的相关元素绝对位置的原因它们保持在相同位置而元素向上滚动（第一个元素fadeOut下一个元素向上滚动并且关闭按钮保持在同一位置）

我希望关闭按钮可以跟随他们的相关元素。

同样引起我的懒惰思维我想知道是否有人知道一些好的jquery插件来做我正在尝试编码的东西，在关闭框按钮点击之后还有ajax回调的东西（不要回复观看jQuery UI请:) ）

谢谢;）

Answer 1

我必须做一些假设，因为你还没有发布你的标记。我认为Diodeus走在正确的轨道上。您正在为新的关闭按钮使用绝对定位。绝对定位将在DOM中查找，直到找到相对定位的元素来锚定坐标。如果您传入的element没有属性position:relative，则按钮可以位于任何位置。

两种可能的修复方法：

为您添加关闭按钮的所有内容添加相对定位：

element.css({'position':'relative'});

显然，这将替换任何其他先前设定的定位。如果你在整个地方添加关闭按钮，这有可能会破坏你的布局。

第二个选项是确保仅相对定位的元素在DOM中是高位的，因此所有关闭按钮都基于相同的东西定位。它有点hacky，但是你可以根据元素的x和y来定位它们：

var x = element.position().x;  
var y = element.position().y;    
// you can add the necessary offsets like element width or height

jQuery在元素上动态添加关闭按钮

1 个答案: