Question

我的问题是我的一些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：

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

Answer 1

HTML中的ID必须是唯一的，您应该使用data-带前缀的自定义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>

脚本，这里使用公共类来绑定事件并使用.data()来获取自定义属性值

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

使用两个div或更多的函数

1 个答案: