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

看起来像按钮的ID和其他元素在表中重复出现，会建议您在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");

我希望这会有所帮助！

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

2 个答案: