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

How to only hide the anchor which has not text?

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

<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 所有按钮中的所有文本,强制显示。

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

您可以使用 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>

您可以通过 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>

您只能使用 CSS 隐藏按钮:

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

CSS empty selector

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