0

チュートリアルには2つの機能ボタンがありますが、1つのボタンで同じことをしたいので、いくつかの変更を加えてこのチュートリアルに従いました。最初のクリックは完璧に機能しますが、2 回目のクリックを行うと、暗い背景がまだ存在し、消えません。コードと JSfiddle は次のとおりです。

$(document).ready(function () {
    var isOpen = false;

    function showOverlayBox() {
        //if box is not set to open then don't do anything
        if (isOpen == false) return;
        // set the properties of the overlay box, the left and top positions
        $('#help-content').toggle();
        // set the window background for the overlay. i.e the body becomes darker
        $('.bgCover').css({
            display: 'block',
            width: $(window).width(),
            height: $(window).height(),
        });
    }

    function doOverlayOpen() {
        //set status to open
        isOpen = true;
        showOverlayBox();
        $('.bgCover').css({
            opacity: 0
        }).animate({
            opacity: 0.5,
            backgroundColor: '#000'
        });
        // dont follow the link : so return false.
        $('#help').attr("class", "helpc");
        return false;
    }

    function doOverlayClose() {
        //set status to closed
        isOpen = false;
        $('#help-content').css('display', 'none');
        // now animate the background to fade out to opacity 0
        // and then hide it after the animation is complete.
        $('.bgCover').css({
            opacity: 0
        }).animate({
            opacity: 0
        }, function () {
            $(this).hide();
        });
        $('#help').attr("class", "help");
    }

    // if window is resized then reposition the overlay box
    $(window).bind('resize', showOverlayBox);
    // activate when the link with class launchLink is clicked
    $('.help').click(doOverlayOpen);
    // close it when closeLink is clicked
    $('.helpc').click(doOverlayClose);

});

http://jsfiddle.net/xoshbin/RuNa4/3/

4

2 に答える 2

1

イベントを間違って添付しています。ここに動作するフィドルがあります: http://jsfiddle.net/RuNa4/14/

// activate when the link with class launchLink is clicked
$(document).on( 'click', '.help', doOverlayOpen );
// close it when closeLink is clicked
$(document).on( 'click', '.helpc', doOverlayClose );

基本的に何が起こっているのかというと、最初のクリックイベントが添付されていましたが、div のクラスを変更していたにもかかわらず、2 番目のイベントは添付されませんでした。古い.liveのようにjQueryの.onを使用しています。ドキュメントはこちらhttp://api.jquery.com/live/

于 2013-11-06T13:55:15.160 に答える
1

close イベントをバインドするときに .helpc が存在しないため、jQuery はクラス名ではなく要素をキャッシュするため、close イベントはアタッチされず、要素は引き続きヘルプ クラスの関数にバインドされます。代わりに、コンテナ要素を作成する場所でイベント委譲を使用し、イベントの発生元を確認する必要があります。

$(".wrapper").on("click", ".help", doOverlayOpen);
$(".wrapper").on("click", ".helpc", doOverlayClose);

ここにフィドルがあります：http://jsfiddle.net/RuNa4/15/

于 2013-11-06T13:39:44.593 に答える