Question

我想要实现的是创建一个if语句来检查它是否可以找到该元素，如果它不能它隐藏一个类 .toggle 的按钮事情是，页面上有多个.toggle按钮。它们都会打开最近的tr.product-info IF 。现在我想删除tr.product-info不存在的按钮。最好的方法是什么？到目前为止我的jQuery代码段：

if ($(".toggle").parents().eq(1).next(".product-info").text() === true) {
  $(".toggle").show();
}
else {
  $(".toggle").hide();
  console.log("test");
}

HTML的一部分

<tr class="price-list">
  <td class="views-field views-field-field-product-table persist essential" data-th="">
    BNOR
  </td>            
  <td class="views-field views-field-field-price-table views-align-center persist essential" data-th="">
    € 218,00
  </td>
  <td class="views-field views-field-field-popup-table persist essential" data-th="">
    <a class="toggle" href="#" style="display: none;">Button</a>
  </td>
</tr>

<tr class="product-info" style="display: none;">
  <td class="explanation">
    <p>Content to be displayed when clicking on Button</p>
  </td>            
</tr>

Answer 1

我不知道你的html页面的结构，但如果你只关心.product-info的文本不是空白，也许你可以通过它们循环隐藏按钮。

$('.product-info').each( function() {
  if ( $(this).text() ) {
    $(this).find('.toggle').show();
    return true
  };
  $(this).find('.toggle').hide();
});

或类似于您的代码，您可以遍历每个切换，看看它是否存在父.production-info以及是否有文本。它不存在，在空数组上调用#text，应返回一个空字符串，以便同时检查存在和文本。

$('.toggle').each( function() {
  if ( $(this).parents('.product-info').text() ) {
    $(this).show()
    return true
  };
  $(this).hide();
});

Answer 2

您需要遍历所有toggle按钮，因为您可以使用each()：

搜索下一个TR是否具有类.product-info：

检查代码段

＆＃13;

$(document).ready(function() {
  $('.toggle').each(function(){
    if ($(this).closest('tr').next().hasClass("product-info")) {
      $(this).show();
    } else {
      $(this).hide();
      console.log("test");
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="price-list">
    <td class="views-field views-field-field-product-table persist essential" data-th="">
      BNOR
    </td>
    <td class="views-field views-field-field-price-table views-align-center persist essential" data-th="">
      € 218,00
    </td>
    <td class="views-field views-field-field-popup-table persist essential" data-th="">
      <a class="toggle" href="#">Button</a>
    </td>
  </tr>
  <tr class="product-info">
    <td class="explanation">
      <p>Content to be displayed when clicking on Button</p>
    </td>
  </tr>
  <tr class="price-list">
    <td class="views-field views-field-field-product-table persist essential" data-th="">
      BNOR
    </td>
    <td class="views-field views-field-field-price-table views-align-center persist essential" data-th="">
      € 218,00
    </td>
    <td class="views-field views-field-field-popup-table persist essential" data-th="">
      <a class="toggle" href="#">Button</a>
    </td>
  </tr>
</table>

＆＃13;

搜索下一个TR内是否有文字

检查代码段

＆＃13;

$(document).ready(function() {
  $('.toggle').each(function(){
    if ($(this).closest('tr').next().text().trim() !== "") {
      $(this).show();
    } else {
      $(this).hide();
      console.log("test");
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="price-list">
    <td class="views-field views-field-field-product-table persist essential" data-th="">
      BNOR
    </td>
    <td class="views-field views-field-field-price-table views-align-center persist essential" data-th="">
      € 218,00
    </td>
    <td class="views-field views-field-field-popup-table persist essential" data-th="">
      <a class="toggle" href="#">Button</a>
    </td>
  </tr>
  <tr class="product-info">
    <td class="explanation">
      <p>Content to be displayed when clicking on Button</p>
    </td>
  </tr>
  <tr class="price-list">
    <td class="views-field views-field-field-product-table persist essential" data-th="">
      BNOR
    </td>
    <td class="views-field views-field-field-price-table views-align-center persist essential" data-th="">
      € 218,00
    </td>
    <td class="views-field views-field-field-popup-table persist essential" data-th="">
      <a class="toggle" href="#">Button</a>
    </td>
  </tr>
  <tr class="product-info">
    <td class="explanation">
      <p></p>
    </td>
  </tr>
</table>

＆＃13;

如果树遍历找不到元素，则隐藏按钮

2 个答案: