从表中选择一个 <td>

Question

我有一个包含用户添加数据的表。所有添加的 ' 都添加了一个相等的按钮。像这样：

<td> 
  <form action="newBet.jsp" method="get">
    <fieldset>
        <input class="button betButton1" id="Won" type="submit" name="W" value="&#10004;"/>

          <div class="closeEarlyForm" style="display:none;">
            <input class="form-control" name="update1" type="number"/>
            <input class="button betButton1" type="submit" name="update" value="Close early"/>
          </div>

       <input class="closeEarlyLink" type="button" value="&#9998; Close early?"/>
    </fieldset>
 </form>
</td>

这很好。现在，我想添加一些 jquery 来切换隐藏的 div 元素。这就是我遇到麻烦的地方。我似乎无法仅在单击的元素上显示 div 元素。相反，它会在所有 td 上显示隐藏的 div 元素。

$(document).ready(function(){
  $(".closeEarlyLink").click(function(e){
    e.preventDefault();
    $(".closeEarlyForm").fadeToggle();
  });
});

我知道我的问题是我选择了该类的所有元素，但我不知道如何只切换/选择特定 td 上的隐藏元素。

Answer 1

您可以尝试将this 关键字与parent() 和find() 一起使用：

$(this).parent().find(".closeEarlyForm").fadeToggle();

演示：

$(document).ready(function(){
  $(".closeEarlyLink").click(function(e){
    e.preventDefault();
    $(this).parent().find(".closeEarlyForm").fadeToggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td> 
  <form action="newBet.jsp" method="get">
    <fieldset>
        <input class="button betButton1" id="Won" type="submit" name="W" value="&#10004;"/>

          <div class="closeEarlyForm" style="display:none;">
            <input class="form-control" name="update1" type="number"/>
            <input class="button betButton1" type="submit" name="update" value="Close early"/>
          </div>

       <input class="closeEarlyLink" type="button" value="&#9998; Close early?"/>
    </fieldset>
 </form>
</td>