0

#container1がクリックされたときにすべてアニメーション化する他の多くのものが含まれている div "#container1"があります。ただし、ユーザーがこれを 2 回実行できないようにするために、.off("click")を使用して#container1を無効にしました。

「#close1」という div もあります。これをクリックすると、すべての div が再びアニメーション化されますが、反対方向になります。次に、 .on("click")を使用して"#container1"を再び機能させたいと思います。

問題は、関数 close1()の他のすべてが.on("click")とは別に機能することです。誰かが私が間違っていることを指摘できますか?

function open1() {
    $(this).children(".teamIconBG1").css('visibility', 'hidden');
    $(this).children(".teamIcon1").stop(true, true).animate({
        "left": "-=25",
            "top": "-=25",
            "width": "190px",
            "height": "190px",
            "border-radius": "110px"
    }, 1000, 'easeOutElastic');
    $(this).children(".teamIconArrow1").stop(true, true).switchClass("teamIconArrow1", "teamIconArrow1_active", 500, "easeOutQuart");
    $(this).children(".teamIconTitle1").stop(true, true).switchClass("teamIconTitle1", "teamIconTitle1_active", 500, "easeOutQuart");
    $(this).children(".close1").stop(true, true).switchClass("close1", "close1_active", 500, "easeOutElastic");
    $(this).off("click");
}

function close1() {
    $(this).parent(".iconContainer1").on('click');
    $(this).parent(".iconContainer1").children(".teamIconBG1").css('visibility', 'visible');
    $(this).parent(".iconContainer1").children(".teamIcon1").stop(true, true).animate({
        "left": "+=25",
            "top": "+=25",
            "width": "140px",
            "height": "140px",
            "border-radius": "85px"
    }, 1000, 'easeOutElastic');
    $(this).parent(".iconContainer1").children(".teamIconArrow1_active").stop(true, true).switchClass("teamIconArrow1_active", "teamIconArrow1", 500, "easeOutQuart");
    $(this).parent(".iconContainer1").children(".teamIconTitle1_active").stop(true, true).switchClass("teamIconTitle1_active", "teamIconTitle1", 500, "easeOutQuart");
    $(this).parent(".iconContainer1").children(".close1_active").stop(true, true).switchClass("close1_active", "close1", 500, "easeOutElastic");

}

$("#container1").click(open1);
$("#container1").click(function () {
    $(".teamContent1").stop(true, true).switchClass("teamContent1", "teamContent1_active", 500, "easeOutQuart");
});

$("#close1").click(close1);
$("#close1").click(function () {
    $(".teamContent1_active").stop(true, false).switchClass("teamContent1_active", "teamContent1", 500, "easeOutQuart");
});
4

3 に答える 3

1

のイベントハンドラがclickありません.on()は次のように使用する必要があります:

$(this).parent(".iconContainer1").on('click', function() {
  //do something
});
于 2013-09-25T10:24:31.167 に答える
1
  1. .one() を使用して、一度だけハンドラーを登録します
  2. ハンドラーの登録を解除するときは、安全のために名前空間を使用してください
  3. 呼び出すだけで$(this).parent(".iconContainer1").on('click');はハンドラーは登録されません。$(this).parent(".iconContainer1").off('click.open').one('click', open1);代わりに使用してください

試す

function open1() {
    $(this).children(".teamIconBG1").css('visibility', 'hidden');
    $(this).children(".teamIcon1").stop(true, true).animate({
        "left": "-=25",
            "top": "-=25",
            "width": "190px",
            "height": "190px",
            "border-radius": "110px"
    }, 1000, 'easeOutElastic');
    $(this).children(".teamIconArrow1").stop(true, true).switchClass("teamIconArrow1", "teamIconArrow1_active", 500, "easeOutQuart");
    $(this).children(".teamIconTitle1").stop(true, true).switchClass("teamIconTitle1", "teamIconTitle1_active", 500, "easeOutQuart");
    $(this).children(".close1").stop(true, true).switchClass("close1", "close1_active", 500, "easeOutElastic");
}

function close1() {
    $(this).parent(".iconContainer1").off('click.open').one('click', open1);
    $(this).parent(".iconContainer1").children(".teamIconBG1").css('visibility', 'visible');
    $(this).parent(".iconContainer1").children(".teamIcon1").stop(true, true).animate({
        "left": "+=25",
            "top": "+=25",
            "width": "140px",
            "height": "140px",
            "border-radius": "85px"
    }, 1000, 'easeOutElastic');
    $(this).parent(".iconContainer1").children(".teamIconArrow1_active").stop(true, true).switchClass("teamIconArrow1_active", "teamIconArrow1", 500, "easeOutQuart");
    $(this).parent(".iconContainer1").children(".teamIconTitle1_active").stop(true, true).switchClass("teamIconTitle1_active", "teamIconTitle1", 500, "easeOutQuart");
    $(this).parent(".iconContainer1").children(".close1_active").stop(true, true).switchClass("close1_active", "close1", 500, "easeOutElastic");

}

$("#container1").one('click.open', open1);
$("#container1").click(function () {
    $(".teamContent1").stop(true, true).switchClass("teamContent1", "teamContent1_active", 500, "easeOutQuart");
});

$("#close1").click(close1);
$("#close1").click(function () {
    $(".teamContent1_active").stop(true, false).switchClass("teamContent1_active", "teamContent1", 500, "easeOutQuart");
});
于 2013-09-25T10:26:22.573 に答える
0

こんなはずじゃ…

$(this).parent(".iconContainer1").on('click', functionName);

また

$(this).parent(".iconContainer1").on('click', function() {
    // do something here when clicked
});

jQueryのドキュメントを参照してくださいon()...

http://api.jquery.com/on/

于 2013-09-25T10:24:16.563 に答える