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

【问题标题】：How to only hide the anchor which has not text?如何只隐藏没有文字的锚点？
【发布时间】：2019-03-12 11:31:18
【问题描述】：

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

<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();
     }
 });

但是这个语句会返回所有按钮中的所有文本，强制显示。

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

【问题讨论】：

要隐藏整个 div 吗？没有文字的按钮一开始是不可见的。
首先你错过了关闭你的一些课程<a class="slider-btn>最后错过了"，其次你可能只使用jQuery('.slider-btn:empty').hide()
@CarstenLøvboAndersen 感谢您对缺失引号的提醒。哇，我尝试使用 :empty 并且它完全按照我想要的方式工作。如果您将此作为答案发布，我会将其标记为正确。
另外，您可以使用 CSS：a.slider-btn:empty { display: none; }
.text() 将 never !== 0 它可能是 != 0 但是当你使用 !== 它使用类型匹配和 .text() 是文本而 0 是一个整数。如果您执行jQuery('.slider-btn').text() !== ""（并循环每个锚点），您的代码会起作用

标签： javascript jquery html anchor

【解决方案1】：

您可以仅使用 CSS 隐藏按钮：

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

CSS empty selector

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

【讨论】：

谢谢！这是最干净的方法。 +1 关于不使用 JS 的提示

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：

问题是只在按钮为空时隐藏按钮，而不是包含它的幻灯片
编辑了我的答案，但在这种情况下，您使用 css 的答案更有效。