如何只隐藏没有文字的锚点？

Question

我有一个由多张图片组成的滑块，每张图片上都有一个锚元素（视为按钮）。

<div class="slider">
  <div class="slide">
    //img and extra html

    <a class="slider-btn">SOME TEXT HERE</a>
  </div>
  <div class="slide">
    //img and extra html

    <a class="slider-btn">SOME TEXT HERE 2</a>
  </div>
  <div class="slide">
    //img and extra html

    <a class="slider-btn"></a>
  </div>
</div>

没有文本的锚点的位置并不总是确定的，因为用户可以根据需要添加更多幻灯片。

目前一切都在正常显示，但是如果锚标记中没有插入文本，则会显示整个锚。

如何只隐藏没有文字的锚点？

我试过类似的方法：

jQuery(document).ready(function(){
     if (jQuery('.slider-btn').text() !== 0){
         jQuery('.slider-btn').show();
     }else{
         jQuery('.slider-btn').hide();
     }
 });

然而，此语句将 return 所有按钮中的所有文本，强制显示。

任何帮助我走上正确道路的帮助将不胜感激。

Answer 1

您可以使用 each 函数遍历 a 元素。检查它是否包含一个空字符串作为文本。如果是这样，请隐藏父项。

$('.slider-btn').each(function(){
  if($(this).text() === "") {
    $(this).parent('.slide').hide();
    //or this if you only want to hide the button, but then you better off with css
    //$(this).hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div class="slide">
    //img and extra html

    <a class="slider-btn">SOME TEXT HERE</a>
  </div>
  <div class="slide">
    //img and extra html

    <a class="slider-btn">SOME TEXT HERE 2</a>
  </div>
  <div class="slide">
    //img and extra html

    <a class="slider-btn"></a>
  </div>
</div>

Answer 2

您可以通过 jQuery 和 CSS 来做到这一点 - 使用 CSS 是最简单和更好的，所以我建议这样做。

方法是一样的，使用:empty选择器。

使用CSS（推荐）

.slider-btn:empty {
  display: none;
}

<div class="slider">
  <div class="slide">
    //img and extra html

    <a class="slider-btn">SOME TEXT HERE</a>
  </div>
  <div class="slide">
    //img and extra html

    <a class="slider-btn">SOME TEXT HERE 2</a>
  </div>
  <div class="slide">
    //img and extra html

    <a class="slider-btn"></a>
  </div>
</div>

使用jQuery

找到按钮为空的所有锚点，并在其上使用hide()！

$(".slider").find('.slider-btn:empty').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div class="slide">
    //img and extra html

    <a class="slider-btn">SOME TEXT HERE</a>
  </div>
  <div class="slide">
    //img and extra html

    <a class="slider-btn">SOME TEXT HERE 2</a>
  </div>
  <div class="slide">
    //img and extra html

    <a class="slider-btn"></a>
  </div>
</div>

Answer 3

您只能使用 CSS 隐藏按钮：

.slider-btn:empty {
 display: none;
}

CSS empty selector

这类似于jQuery('.slider-btn:empty').hide()，但它不使用JS，也不会添加内联样式display:none。不过，这两种方法都有效。