Javascript 将函数用于两个或多个div

我的问题是，我的一些div脚本可以工作，而其他脚本不能！ 我用

JavaScript

创建了一个函数，其中包含一些错误。 我想知道我的错误是什么。这是相同的代码，我刚刚在不同的类中复制并粘贴了两次。这是我的密码

Javascript:

$(document).ready(function () {
    var cls = document.getElementById('showhide').className;
    $("#showhide").click(function () {
        $("#" + cls).show();
        $("#showhide").hide();
    });
    $("#cancel").click(function () {
        $("#" + cls).hide();
        $("#showhide").show();
    });
});

HTML:

---

HTML中的ID必须是唯一的，您应该使用带有前缀的自定义HTML属性来存储信息

HTML，这里添加了一个公共类

<tr>
    <td>
        <div class='showhide' data-id='changepasswordfield'>
            <a href='#'>Change password ?</a>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div class='showhide' data-id='addcontactinfofield'>
            <a href='#'>Add Contact info</a>
        </div>
    </td>
</tr>

---

使用唯一id。。不要使用相同的名称var cls=document.getElementById（'showhide'）。className；//语句使用错误。使用var cls=document.getElementById（'showhide'）；我认为您已经混合了

id

和

class

属性：

id

应该是唯一的，

class

用于样式设置和组织。正如@Kroltan所述，您的DIV id必须是唯一的。为这两个元素使用一个公共类，并使用jQuery类选择器

$（“.your class”）

。您使用的是重复的“showhide”id twise，请确保我们不应在文档中使用重复的元素id。从其他角度看，第一个元素始终触发，我们可以使用重复的类和其他属性。

<tr>
    <td>
        <div class='showhide' data-id='changepasswordfield'>
            <a href='#'>Change password ?</a>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div class='showhide' data-id='addcontactinfofield'>
            <a href='#'>Add Contact info</a>
        </div>
    </td>
</tr>

$(document).ready(function () {
    $(".showhide").click(function () {
        $("#" + $(this).data('id')).show();
        $(this).hide();
    });
});