0

jQuery を使用して、 adivを別の に追加 (移動) していますdiv。これは正常に機能していますが、今は関数にしようとしていて、いくつかの問題が発生しています。

私はいくつかdivの を持っており、2 つは と と呼ばれ#geregeldて#niet_geregeldいます。1 つが呼び出され#content_vragen、 1 つが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インを 2 回クリックする必要があります。明らかに、ユーザーは 1 回だけクリックする必要があります。#geregeldappendToContent_vragen

私が使用しているコードで小さな jsFiddle があります: http://jsfiddle.net/hE7Gm/

4

1 に答える 1

1

私はすべてのオランダ人に混乱していますが、このブロックでは:

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

おそらく2つの問題があります。1 つ目は、 への内部呼び出しが.clickクリックを行わず、新しいクリック ハンドラーを登録.on('click', ...)していることです。それが本当の問題かどうかはわかりません。なぜなら、サイトが実際に何をすべきか分からないからです。

2 つ目の問題は、が呼び出されたthisときの設定です。appendToContent_vragen私が推測するように、その関数をすぐに呼び出したい場合（2回目のクリックなし）

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

これは、現在の要素と等しい.each指定された関数を呼び出すため、機能します。this

また、アニメーション関数では、これらすべての.closest()呼び出しは必要ありません。渡された要素が であることは既にわかっている.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 に答える