0

我有一个 div “#container1”，其中包含一堆其他的，当单击#container1时它们都会动画。但是，为了阻止用户执行此操作两次，我使用了.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 回答