Скрытие нескольких элементов при изменении CSS

Question

У меня есть несколько кнопок, которые я использую в качестве тегов. Я хотел бы проверить, являются ли теги видимыми, и если все теги скрыты, а затем скрыть четкую ссылку выбора. МОИ HTML IS:

<div class="col-xs-12 col-sm-5 cols"> 
     <div id="tags"> 
     <button type="button" class="btn btn-default usertitle-tag hide-tag tg-btns">x &nbsp;&nbsp;Usertitle</button> 
     <button type="button" class="btn btn-default comments-tag hide-tag tg-btns">x &nbsp;&nbsp;Comments</button> 
     <button type="button" class="btn btn-default topics-tag hide-tag tg-btns">x &nbsp;&nbsp;Topics</button> 
     <button type="button" class="btn btn-default login-tag hide-tag tg-btns">x &nbsp;&nbsp;Login</button> 
    </div> 
     <a href="#" class="cancel clear">Clear selection</a> 
     </div> <!--/.col-xs-12--> 

Я попытался это с JQuery, но ясный выбор остается видимый. Где я иду?

$('.hide-tag').each(function(){ 
    if ($(this).css('display') == 'none'){ 
     $(".clear").hide(); 
    } 
}); 

Answer 1

Вы можете установить видимость верно, если по крайней мере один hide-tag видна как

$(".clear").toggle($('.hide-tag').is(':visible')); 

Answer 2

вы можете использовать is(":visible") в JQuery, который будет возвращать true если элемент виден

Попробуйте как

$(this).is(":visible") 

Answer 3

$('.hide-tag:visible').size() > 0 ? $(".clear").show() : $(".clear").hide(); 

Answer 4

В соответствии с вашими требованиями эта функция скроет ярлык, если кнопка не видна.

Проверьте это.

function checkForClearBtnDisplay() 
    { 
     clearBtnVisible=0;   //BY DEFAULT CLEAR TAG VISIBILITY SET AS FALSE 

     $('#tags button').each(function(){ 

       if($(this).is(':visible')) 
       { 
        clearBtnVisible=1; 
       }      
     }); 

     if(clearBtnVisible==0) 
     { 
      //HIDE THE CLEAR TAG IN CASE NO BUTTON IS VISIBLE 
      $('.clear').hide(); 
     } 
     else 
     { 
      $('.clear').show(); 
     } 
    } 

</script>