0

我正在使用 jQuery 将 a 附加（移动）div到另一个div. 这工作正常，但现在我试图让它成为一个功能，我遇到了一些问题。

我有几个div，两个叫#geregeld和#niet_geregeld。一个叫#content_vragen一个class叫.container_vragen。

.container_vragen最初放置在#content_vragen. 在中.container_vragen是带有此代码的按钮：

 $('.submenu').on('click','.groen',function() {
            $(this).closest('.container_vragen').fadeOut(400, function() {
                $(this).closest('.container_vragen').css({overflow : 'hidden', color : 'green'});
                $(this).closest('.container_vragen').appendTo("#geregeld");
                $(this).closest('.container_vragen').fadeIn(400);
            });
        });

此操作.container_vragen将#geregeld div. 这工作正常。但我希望用户能够将.container_vragen背面放入#content_vragen div，这被证明是一个问题。

我用来做的代码是这样的：

function appendToContent_vragen() {
        $(this).closest('.container_vragen').fadeOut(400, function() {
            $(this).closest('.container_vragen').appendTo('#content_vragen');
            $(this).closest('.container_vragen').css({overflow : 'hidden', color : 'black'});
            $(this).closest('.container_vragen').fadeIn(400);
        });
    }

这也有效。问题是在#geregeld div 中选择正确的div。

$('#geregeld , #niet_geregeld').on('click',function(){
        $('.container_vragen', this).click(appendToContent_vragen);
    });

.container_vragen如果我使用此代码，我必须在in上单击两次#geregeld才能访问该功能appendToContent_vragen，显然我希望用户只单击一次。

我正在使用的代码中有一个小的 jsFiddle：http: //jsfiddle.net/hE7Gm/

4

1 回答 1

1

我被所有的荷兰人弄糊涂了，但在这个街区：

$('#geregeld , #niet_geregeld').on('click',function(){
    $('.container_vragen', this).click(appendToContent_vragen);
});

你可能有两个问题。第一个是内部调用.click不会进行点击，而是注册一个新的点击处理程序，就像这样.on('click', ...)做一样。我不知道这是否是一个真正的问题，因为我不知道该网站真正应该做什么。

第二个问题是设置this何时appendToContent_vragen被调用。如果，正如我所怀疑的，您只想立即调用该函数（无需再次单击）

$('#geregeld, #niet_geregeld').on('click', function() {
     $('.container_vragen', this).each(appendToContent_vragen);
});

这是有效的，因为将调用与当前元素相等.each的提供的函数。this

此外，在您的动画函数中，不需要所有这些.closest()调用 - 您已经知道传递的元素是 a .container_vragen，所以：

function appendToContent_vragen() {
    $(this).fadeOut(400, function() {
        $(this).appendTo('#content_vragen')
               .css({overflow : 'hidden', color : 'black'})
               .fadeIn(400);
    });
}
于 2013-01-15T19:37:52.507 回答