Question

想要在使用jQuery的click事件时为按钮分配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;
}

JQUERY：

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

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

Answer 1

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

（1）它现在不能正常工作的原因是因为当你运行$("#hide").click(function() { ...时，页面上还没有任何带有hide id的元素，所以函数没有'设置为在任何地方运行。您可以使用的一种方法是执行以下操作：

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

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

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

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

（3）最后，它有效！但是，如果我们在页面中添加另一个hiddendiv，我们发现当我们点击一个时，它会更新所有这些。我们可以使用this来解决这个问题。触发该函数时，this关键字将引用您单击的元素（使用show或hide类。我们可以利用它并执行以下操作：< / p>

$(".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');
});

使用jQuery更改元素id不适用于我的函数

1 个答案: