Question

我有一个生成一些表格行的foreach语句，并且在每个表格行上都有一个variant，其唯一ID。

我希望在variant附近有一个按钮，可以将表单的属性从hidden更改为visible，但我只想更改该行。

@foreach($variants as $variant)
<tr>
{{$variant->name}}

<button id="show{{$variant->id}}>Show Form</button>

<form action="POST" hidden="true" id="variantForm{{$variant->id}}>
<input type="text" name="someInput"/>
<button type="submit/>
</form>

</tr>
@endforeach

在jQuery中，我喜欢

<script>

$(".show[id_from_foreach]").click(
function(){ change to visible only the form with id=variantForm[id_from_foreach] });

</script>

Answer 1

1. <button class="show_variant">Show Form</button>
2. <script>
    $(".show_variant").click(function() {
        var $btn = $(this);
        var $form = $btn.next();
        $form.show();
    });
</script>

或者如果您想设置ID，您可以执行以下操作：

1. <button class="show_variant" data-variant-id="{{ $variant->id }}">ShowForm</button>
2.   <script>
        $(".show_variant").click(function() {
            var $btn = $(this);
            var variantId = $btn.data('variantId');
            var $form = $('#variantForm' + variantId);
            $form.show();
        });
    </script>

Answer 2

这是增量/生成的id属性是反模式的主要示例。不要使用它们。

而是在HTML中的元素上使用公共类，然后遍历JS中的DOM以查找应该修改的相关元素。试试这个：

@foreach($variants as $variant)
  <tr>
    {{$variant->name}}

    <button class="show-button" id="show{{$variant->id}}>Show Form</button>

    <form action="POST" hidden="true" id="variantForm{{$variant->id}}>
      <input type="text" name="someInput" />
      <button type="submit">Submit</button>
    </form>
  </tr>
@endforeach

$(".show-button").click(function(){ 
  $(this).next('form').show();
});

在不知道jQuery的完整id的情况下更改给定元素的属性

2 个答案: