Question

我有一些我用作标签的按钮。我想检查标签是否可见，如果隐藏了所有标签，则隐藏清除选择链接。我的HTML是：

 <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可见，则可以将可见性设置为true，如

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

Answer 2

你可以在jquery中使用is(":visible")，如果元素可见则返回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>

CSS更改时隐藏多个元素

4 个答案: