用jQuery改變給定元素的屬性而不知道它的完整ID

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的我wannt像

<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(); 
});