每个表格列按钮的单击操作按钮

Question

我有一个访问者表，我可以在其中添加访问者。我正在在表格中显示所有访问者 我已将两个 登录和退出按钮 设置为两列。现在，当我单击按钮中的符号时，它会将当前时间插入 db 中，然后将替换登录按钮并显示 db 列中的时间。我添加了一个脚本并创建了一个跨度并检索了日期时间并最初隐藏，当点击按钮时它会显示。但它仅适用于第一个访问者。其他按钮不起作用。当我加载页面时，按钮再次出现。但我想，当我点击按钮时，它永远不会再出现，然后总是显示日期时间。如何设置所有按钮的操作？如何使用 ajax 调用来做到这一点？

<script type="text/javascript">
    $(document).ready(function() {
        $("#hideDate").hide();
    $("#hide").click(function(event) {
    event.preventDefault();
    $(this).parent().hide();
    $("#hideDate").show();
    });
    });
    $('#button-to-hide').hide();
</script>

```

<td>
    <form method="post" action="{{route('signInUpdate','id')}}">
        {{ csrf_field()}}
        <input type="hidden" name="isSignIn" value="{{$internalVisitor->isSignIn}}"/>
        <input type="hidden" name="tableId" value="{{$internalVisitor->id}}"/>
        <button type="submit">
        <a id="hide">Sign In</a></button>
        <p id="p1"></p>
    </form>
    <span id="hideDate">{{ $internalVisitor->signInTime}}</span>
</td>

```

Answer 1

看起来你的按钮和其他元素的ids在表格中重复了，建议你在你的js代码中使用class属性。

Answer 2

HTML 中的每个元素只能有一个 ID。但是，您可以拥有具有相同类的无限元素。所以我刚刚将您的代码从 id 更新为 class。

 <td>
<form method="post" action="{{route('signInUpdate','id')}}">
    {{ csrf_field()}}
    <input type="hidden" name="isSignIn" value="{{$internalVisitor->isSignIn}}"/>
    <input type="hidden" name="tableId" value="{{$internalVisitor->id}}"/>
    <button type="submit">
    <a class="hide">Sign In</a></button>
    <p class="p1"></p>
</form>
<span class="hideDate">{{ $internalVisitor->signInTime}}</span>

当然你的 javascript 也需要一点更新

<script type="text/javascript">
$(document).ready(function() {
    $(".hideDate").hide();
$(".hide").click(function(event) {
event.preventDefault();
$(this).parent().hide();
$(".hideDate").show();
});
});
$('.button-to-hide').hide();

但是，这可能会导致所有客户一键隐藏。这可以通过重构您的代码来解决，使其更适用于 $(this)。就像这样：

$(this).find(".hide");

或

$(this).find("a");

我希望这会有所帮助！