如何只隐藏没有文字的锚点?
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;
}
这类似于jQuery('.slider-btn:empty').hide()
,但它不使用JS,也不会添加内联样式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(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;
}
这类似于jQuery('.slider-btn:empty').hide()
,但它不使用JS,也不会添加内联样式display:none
。不过,这两种方法都有效。