我对Java语言非常陌生,因此如果这看起来很简单,请原谅我。

我正在尝试使用Javascript在两个按钮之间做一个简单的切换功能,以使要显示的内容上下滑动。不幸的是,该效果仅作用于表中显示的第一行数据。

有人可以发现我需要做些什么才能使此功能对每个表行有效吗?

这是我的JSFiddle的链接:
JSFiddle Link

这是我的代码:



$(function() {
  $("td[colspan=9]").find("p").hide();
  $("#less").hide();
  $("#more").click(function(event) {

    event.stopPropagation();
    var $target = $(event.target);

    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideDown();
      $("#less").show();
      $("#more").hide();
    } else {
      $target.closest("tr").next().find("p").slideDown();
      $("#less").show();
      $("#more").hide();
    }

  });
  $("#less").click(function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideUp();
      $("#more").show();
      $("#less").hide();
    } else {
      $target.closest("tr").next().find("p").slideUp();
      $("#more").show();
      $("#less").hide();
    }

  });
});

table {
  width: 75%;
}
tr {
  border: 2px solid #AEAEAE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button id=more>+</button>
      <button id=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button id=more>+</button>
      <button id=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button id=more>+</button>
      <button id=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>
</table>





预先感谢您的任何帮助。

最佳答案

您的代码段中几乎没有问题。

1:越来越多的id元素重复

2:您在这些重复的ID选择器上绑定了click事件,这使向上/向下滑动的整个逻辑都不正确

试试下面的代码。

我已经将重复的ID更改为class,并做了一些更改以使其向上滑动,向下滑动并显示更多/更少的逻辑。



$(function() {
  $("td[colspan=9]").find("p").hide();
  $(".more").hide();
  $(document).on("click",".more", function(event) {

    event.stopPropagation();
    var $target = $(event.target);

    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideDown();
      $target.next(".less").show();
      $target.hide();
    } else {
      $target.closest("tr").next().find("p").slideDown();
      $target.next(".less").show();
      $target.hide();
    }

  });
   $(document).on("click",".less", function(event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("td").attr("colspan") > 1) {
      $target.slideUp();
      $target.prev(".more").show();
      $target.hide();
    } else {
      $target.closest("tr").next().find("p").slideUp();
      $target.prev(".more").show();
      $target.hide();
    }

  });
});

table {
  width: 75%;
}
tr {
  border: 2px solid #AEAEAE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button class=more>+</button>
      <button class=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button class=more>+</button>
      <button class=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

  <tr>
    <td>
      <p>Name</p>
    </td>
    <td>
      <p>Age</p>
    </td>
    <td>
      <p>Info</p>
    </td>
    <td>
      <button class=more>+</button>
      <button class=less>-</button>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>
</table>

09-20 23:54