0

想要在使用 jQuery 的点击事件时为一个按钮分配 2 个函数，它将像这样工作：我有一个隐藏在另一个 div 后面的 div，当单击使用 jQuery 向上滑动 div 的按钮时...这个#show ID 显示 div，ID #hide 隐藏 div，如何为同一个按钮分配 2 个不同的 ID？我已使用 ID 属性完成此操作，并且 attr ... 更改为 #hide，但未执行链接到此 ID 的功能

http://jsfiddle.net/dca2b/1/

HTML：

<div class="content"></div>
<div class="footer"></div>
<div class="hiddendiv"> 
    <a href="#" id="show">show</a>
</div>

CSS：

.content {
    height: 400px;
}
.footer {
    display: inline-table;
    background: #ff8;
    width: 100%;
    height: 80px;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.hiddendiv {
    width: 500px;
    height: 300px;
    background: #252525;
    position: relative;
    z-index: 1;
    top: -120px;
    margin: 0 auto;
}
.hiddendiv a {
    color: #000;
    font-size: 15px;
    font-family: sans-serif;
    text-decoration: none;
    padding-top:5px;
    padding-bottom:5px;
    padding-left: 20px;
    padding-right: 20px;
    background: #eee;
    border-radius: 10px;
    box-shadow: inset 0px 1px 20px 0px #333;
}
.hiddendiv a:hover {
    color: #f0f;
}

查询：

$("#show").click(function () {
    $(".hiddendiv").animate({
        top: "-=250"
    }, "slow");
    $("#show").attr("id", "hide");
});

$("#hide").click(function () {
    $(".hiddendiv").animate({
        top: "+=250"
    }, "slow");
    $("#hide").attr("id", "show");
});
4

1 回答 1

0

所以我的回答有几个部分，请耐心等待：

(1) 它现在不工作的原因是因为当你运行时$("#hide").click(function() { ...，页面上还没有任何具有hideid 的元素，所以该函数不会被设置为在任何地方运行。您可以用来解决此问题的一种方法是执行以下操作：

$(".hiddendiv").on('click', '#hide', function() {
   ...
});

通过将 click 事件处理程序附加到父 div，每当父级看到事件发生在 id 的子 div 中时hide，它将在该子 div 上运行该函数。

(2) 你不应该在这里使用 ID。如果在某个时候，您的页面上有多个按钮需要此功能，那么您将遇到麻烦，因为每个页面只能使用一次 ID。在这种情况下，一个类会更好地工作。然后您可以执行以下操作：

$(".hiddendiv").on('click','.show', function () {
    $(".hiddendiv").animate({
        top: "-=250"
    }, "slow");
    $(".show").addClass('hide').removeClass('show');
});

(3) 终于成功了！但是，如果我们在页面中添加另一个 hiddendiv，我们会发现当我们单击一个时，它会更新所有这些。我们可以通过使用来解决这个问题this。当函数被触发时，this关键字将引用您单击的元素（使用showorhide类。我们可以利用它并执行以下操作：

$(".hiddendiv").on('click','.show', function () {
    $(this).parent().animate({
        top: "-=250"
    }, "slow");
    $(this).addClass('hide').removeClass('show');
});

$(".hiddendiv").on('click','.hide', function () {
    $(this).parent().animate({
        top: "+=250"
    }, "slow");
    $(this).addClass('show').removeClass('hide');
});
于 2013-11-02T20:20:57.567 回答