使用 jQuery 更改元素 ID 不适用于我的功能答案

【问题标题】：changing element id with jQuery not work for my function使用 jQuery 更改元素 ID 不适用于我的功能
【发布时间】：2013-11-02 20:03:47
【问题描述】：

想要在使用 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");
});

【问题讨论】：

您不能将两个 ID 分配给一个 HTML 元素。但是，您可以分配多个类。
再次尝试使用类，似乎该按钮仅适用于头等类

标签： javascript jquery css html

【解决方案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 类。我们可以利用它并执行以下操作：

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

【讨论】：