Question

我想要实现的目标：我想要实现的目标很简单我有一个带有2个表体标签的表。第一个显示为它的主要内容。最后一个td元素有一个锚标记，单击此锚标记应该使用jQuery方法slideToggle（）显示下一个tbody标记。

问题：我遇到的问题是这些是使用Angular.js动态制作的表格。因此，如果有5个项目，则有5个div元素，每个元素都有一个表，对于div中的每个tbody都具有相同的类。这是有意义的，因为每个我希望click函数显示特定表second div如果用户想要查看与该项相关的其他内容。

尝试过的事情：

$（本）的.next（＆＃39;。测试＆＃39）。的slideToggle（）;
$（本）.closest（＆＃39; TBODY＆＃39）。发现（＆＃39;。测试＆＃39）。的slideToggle（）;
$（本）.closest（＆＃39;。测试＆＃39）。的slideToggle（）;
$（本）.closest（＆＃39; TR＆＃39）。发现（＆＃39;。测试＆＃39）。的slideToggle（）;

帖子会查看StackOverflow上的类似问题：

affect only the clicked element in jquery for multiple elements with same class
Using a class name in jQuery's .closest()
jQuery closest(); not working
Jquery adding click function to several spans with the same Class

非Stack Overflow网站：

https://www.sitepoint.com/jquerys-closest-parents/

HTML：

<div class="productsList" ng-repeat="products in productListing.products">
    <div class="productSection">
        <div class="figureDiv">
            <figure class="img">
                <img ng-src="{{products.image}}" />
            </figure>
        </div>
        <div class="description">
            <h2 ng-bind="products.summary"></h2>
            <summary ng-bind="products.description"></summary>
        </div>
        <table class="productTable">
            <tbody>
                <tr><td><b>Product Name</b></td><td ng-bind="product.merchantName"></td></tr>
                <tr><td><b>Valid:</b></td><td>{{products.validityStart}} to {{products.valididtyEnd}}</td></tr>
                <tr><td><b>Product Type:</b></td><td>Appliance</td></tr>
                <tr><td><b>Testing:</b></td><td>Yes<a class="testLink" href="">Show More &gt;</a></td></tr>
            </tbody>
            <tbody class="test">
                <tr><td><b>Extra</b></td><td>Extra</td></tr>
                <tr><td><b>Extra</b></td><td>Extra</td></tr>
                <tr><td><b>Extra</b></td><td>Extra</td></tr>
                <tr><td><b>Extra</b></td><td>Extra</td></tr>
            </tbody>
        </table>
    </div>
</div>

jQuery（当前实现）：

function init() {
    jQuery(document).ready(function(){

        $(document).on("click", ".productTable .testLink", function (ev) {

        ev.stopImmediatePropagation();
        $(this).closest('tr').find('.test').slideToggle();
        $(".test").slideToggle();
   });
}

视觉来自动态内容（3项）：

Table  class="productTable"
  tbody
      anchor tag  class="testLink"
  tbody  class="test"

Table  class="productTable"
  tbody
      anchor tag  class="testLink"
  tbody  class="test"

Table  class="productTable"
  tbody
      anchor tag  class="testLink"
  tbody  class="test"

结束正如您可以看到的那样，创建了3个表，每个表都有相同的类。因此，对于第一个表，如果用户单击锚标记，则在该特定表中的正文标记将显示为切换。只有那一个应该显示不是所有这些都是当前的问题。

我尝试了很多解决方案，但是没有任何工作，每一个实现都会让所有这些解决方案变得非常糟糕。

Answer 1

我觉得这样的事情。

＆＃13;

  $(".productTable .testLink").on("click", function() {
    $(this).parents('.productTable').children('.test').slideToggle();
  });

＆＃13;

.testLink {
  color: blue;
  text-decoration: underline;
}
.test {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="productTable">
  <tbody>
    <tr>
      <td><b>Product Name</b>
      </td>
      <td ng-bind="product.merchantName"></td>
    </tr>
    <tr>
      <td><b>Valid:</b>
      </td>
      <td>{{products.validityStart}} to {{products.valididtyEnd}}</td>
    </tr>
    <tr>
      <td><b>Product Type:</b>
      </td>
      <td>Appliance</td>
    </tr>
    <tr>
      <td><b>Testing:</b>
      </td>
      <td>Yes<span class="testLink">Show More &gt;</span>
      </td>
    </tr>
  </tbody>
  <tbody class="test">
    <tr>
      <td><b>Extra</b>
      </td>
      <td>Extra</td>
    </tr>
    <tr>
      <td><b>Extra</b>
      </td>
      <td>Extra</td>
    </tr>
    <tr>
      <td><b>Extra</b>
      </td>
      <td>Extra</td>
    </tr>
    <tr>
      <td><b>Extra</b>
      </td>
      <td>Extra</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

我认为问题出在你的jQuery $(".test").slideToggle();的这一行，因为它将在所有.test上执行slideToggle尝试删除它。同时将.closest('tr');更新为.closest('table');，因为.test位于表格标记中而不是tr

Answer 3

根据我的建议，您正在寻找JQuery的.next()方法。仅适用于父tbody并致电.next()

示例

$('.testLink').parentsUntil('tbody').next().show();

使用相同的类来使用click方法按类

3 个答案: