2

対応するチェックボックスがjQueryでチェック/チェック解除されたときに、新しいdivを追加/削除したいと思います。これが私の試みです：

<script type="text/javascript">
    $(function() {
        $("#form1 :checkbox#checkbox1").click(function() {
            var d = document.createElement('div');
            if ($(this).is(":checked")) {
                $(d).addClass("newdiv")
                    .html("This is a new div")
                    .appendTo($("#mydiv"))
                    .hide()
                    .fadeIn(1000);
                }
            else {
                //$(".newdiv").fadeOut(1000);
                $(d).fadeOut(1000);
            }
        });
    });
</script>

フェードイン処理がスムーズに出ます。しかし、同じ方法を使用して $(d) をフェードアウトしようとしたとき、うまくいきませんでした。新しく生成された div がページに残りました。私はいくつかの調査を行い、（上記のコードでコメントされている）を使用して回避策を取得$(".newdiv").fadeOut(1000);しましたが、それは私にとって最善の解決策ではないと思います。また、最初の試みがうまくいかなかった理由を本当に知りたいです。助言がありますか？ありがとう。

4

3 に答える 3

1

jsFiddleデモ

クリックハンドラーを実行するたびdに、新しい要素を使用して新しい変数を作成します。代わりに、クリックハンドラーの前にこれを実行して、各インスタンスが同じ要素を参照するようにします。以下に他のオプションの改善を含めました。

チェックボックスには、イベントのchange方が適しています。また、セレクターを作成したことに注意してください#checkbox1。これは、すでに明確であり、最大限に具体的であるためです。

視覚効果を高めるには、要素を追加して非表示にしてからフェードインしないでください。ほとんどのブラウザでは、要素が表示される前にちらつきが表示されます。代わりに、クラスを使用してcssで非表示にします.hidden {display: none;}。fadeToggleif / elseを実行する代わりに、を使用して表示を切り替えることもできます。clearQueueトランジション中の複数回のクリックによる余分なイベントを削除し、トランジションがスムーズに表示されるようにします。

最後に、jQueryを使用して要素を作成します。

$(function () {
    var $d = $('<div>', {
        "class": "hidden",
        text: "This is a new div"
    }).appendTo("#mydiv");

    $("#checkbox1").change(function () {
        $d.clearQueue()
          .stop()
          .fadeToggle(1000);
    });
});
于 2013-03-22T03:34:00.183 に答える
1

できる変更はほとんどありません 1.チェックボックスの ID が
あるため、セレクターは必要ありません。2. createElement を使用する代わりに jQuery を使用して div を作成します 。 3. div をフェードアウトした後、それを削除する必要があります。ドムから#form1 :checkbox#checkbox1#checkbox1
$('<div/>')

$(function() {
    $("#checkbox1").click(function() {
        if ($(this).is(":checked")) {
            $('<div/>').addClass("newdiv")
            .html("This is a new div")
            .appendTo($("#mydiv"))
            .hide()
            .fadeIn(1000);
        }
        else {
            $('#mydiv .newdiv').fadeOut(function(){
                $(this).remove()
            })
        }
    });
});

デモ:フィドル

div別の解決策は、表示および非表示になる静的なものを用意することです

$(function() {
    var div = $('<div/>').addClass("newdiv")
            .html("This is a new div")
            .appendTo($("#mydiv"))
            .hide();
    $("#checkbox1").click(function() {
        if ($(this).is(":checked")) {
            div.fadeIn(1000);
        } else {
            div.fadeOut(1000)
        }
    });
});

デモ:フィドル

于 2013-03-22T03:25:14.767 に答える
-1

jQuery オブジェクトを作成した方がよいでしょう。

<script type="text/javascript">
    $(function() {
        $("#checkbox1").click(function() {
            var d = $('<div class="newdiv"></div>');
            if ($(this).is(":checked")) {
                d.html("This is a new div")
                .appendTo($("#mydiv"))
                .hide()
                .fadeIn(1000);
                }
            else {
                d.fadeOut(1000);
            }
        });
    });
</script>
于 2013-03-22T03:16:57.447 に答える