Question

我有一个div “＃container1”，其中包含一系列在点击＃container1 时全部动画的其他内容。但是，为了阻止用户执行此操作两次，我使用了 .off（“点击”）来停用＃container1 。

还有一个名为“＃close1”的div，当点击时会再次为所有div设置动画，但方向相反。然后，我想使用 .on（“点击”）使“＃container1”再次工作。

问题是， function 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");
});

Answer 1

你没有click的事件处理程序，.on()应该像：

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

Answer 2

使用.one（）仅注册一次处理程序
取消注册处理程序时使用名称空间来确保安全
只是调用$(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");
});

Answer 3

应该是这样的......

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

或

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

请参阅on() ...

的jQuery文档

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

on（）赢了但是其他一切都没有？

3 个答案: