Как скрыть только якорь без текста? - PullRequest
Новая
       5

Как скрыть только якорь без текста?

0 голосов
/ 12 марта 2019

У меня есть слайдер, состоящий из нескольких изображений, и на каждом изображении есть элемент привязки (рассматривается как кнопка). 

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

Однако это утверждение вернет все тексты во всех кнопках, заставляя его показывать.

Буду очень признателен за любую помощь, чтобы поставить меня на правильный путь.

Ответы [ 3 ]

4 голосов
/ 12 марта 2019

Вы можете скрыть кнопку только с помощью CSS: 

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

CSS пустой селектор

Это похоже на jQuery('.slider-btn:empty').hide(), но оно не использует JS и не добавит встроенный стиль display:none. Оба подхода будут работать, хотя.

2 голосов
/ 12 марта 2019

Вы можете сделать это с помощью 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>
0 голосов
/ 12 марта 2019

Вы можете зацикливать элементы 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>
...