Question

有一个包含多行的表格。每行都有一个SHOW按钮，可以向下滑动一个隐藏的div。在该div（classname：Content）通过ajax加载第二页内容与该表的id。问题是：当其中一行被点击它是正确的工作和第二页加载在其中。但当另一行点击几秒钟时，行加载上一行的内容然后修复。当一行向上滑动时有没有办法清除最后的数据？来解决这个问题？这是我的代码：

$(function() {
  $(".show").on("click", function(e) {
    e.preventDefault();
    console.log($(this).find(':hidden').val())
    var content = $(this).closest("tr").next().find(".content");
	$(".content").not(content).slideUp();
	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>

Answer 1

选择相对于您点击的元素的div

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

ajax第二次加载缓存

1 个答案: