javascript - 如何在Jquery中的点击事件中传递元素的ID

Question

我有一个包含行数的表格，我使用点击来显示隐藏的行。在每个隐藏行中，我都有一个带有名称内容的 div。在这个 div 中，我使用 ajax 加载第二页。实际上，当我单击“显示”按钮时，第二页将出现在带有类名内容的 div 中。我的问题:- 有没有办法将每行的 id(每行的 id 在输入中以名称 id 隐藏)传递给单击事件上的函数，然后使用 href 中传递的 id 发送到第二页？这是我的片段:-

$(function() {
  $(".show").on("click", function(e) {
    	var id = $(this).find(':hidden').val();
    e.preventDefault();
    $(this).closest("tr").next().find(".content").slideToggle();
	  $(".content").load("/secondpage.htm?id="+id+"");
    alert(id)
  });
});

.subRow {
  padding:0;
  background-color: #CFCFCF;

}
.content {
  background-color: #CFCFCF;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
<tr>
<td>title</td>
<td>title</td>
<td>title</td>
<td><a href="#" class="show"><input type="hidden" val="123" name="id"/>Show </a></td>
</tr>
<tr id="tr_2_1_0" class="subRow">
<td colspan="6"><div class="contentdiv"></div></td>
</tr>
  <tr>
<td>title</td>
<td>title</td>
<td>title</td>
<td><a href="#" class="show"><input type="hidden" val="123" name="id"/>Show </a></td>
</tr>
<tr id="tr_2_1_0" class="subRow">
<td colspan="6"><div class="contentdiv"></div></td>
</tr>

</table>

谢谢

Answer 1

您可以使用 .find()/.children() 来定位 hidden 元素，然后使用 .val() 可以使用。

$(".show").on("click", function(e) {
    e.preventDefault();
    var id = $(this).find(':hidden').val();
    $(".content").load("/secondpage.htm?id=" + id);
    console.log(id )
});

$(function() {
  $(".show").on("click", function(e) {
    e.preventDefault();
    console.log($(this).find(':hidden').val())
	$(this).parent().toggleClass('rotati')
    $(this).closest("tr").next().find(".content").slideToggle();
	  $(".content").load("/secondpage.htm?id=@id");
  });
});

.subRow {
  padding:0;
  background-color: #CFCFCF;

}
.content {
  background-color: #CFCFCF;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
  <caption>Ajax Test Table</caption>
  <thead>
    <tr align="center" class="parentRow">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parentRow">
      <td><a href="#" class="show">SHOW <input type="hidden" value="123" name="id"/></a>
      </td>
      <td>test cell</td>
      <td>test cell</td>
    </tr>
    <tr class="subRow">
      <td colspan="5">
        <div class="content"><p></p></div>
      </td>
    </tr>
    <tr class="parentRow">
      <td><a href="#" class="show">SHOW <input type="hidden" value="456" name="id"/></a>
      </td>
      <td>test cell</td>
      <td>test cell</td>
 
    </tr>
    <tr class="subRow">
      <td colspan="5">
        <div class="content"><p></p></div>
      </td>
    </tr>

  </tbody>
</table>