Question

早上好！

我的购物图表有点问题。当用户向其添加元素时，将在图表图标顶部显示项目价格而无需重新加载页面。现在，我尝试将其包装在一个容器中，该容器具有背景色和一些填充物。这就是我的问题所在。填充会导致div在添加任何项目之前稍微可见。所以我一直都在购物车顶部有点害怕。

当该div为空时（用户未向其中添加任何项目/金额时），我想完全隐藏该div。

到目前为止，我已经提出了以下代码：

HTML

<span id ="check">
 <a href="#" class="pjCsCheckout">$70</a>
</span>

css

#check a {
  position: absolute;
  background: #ddd;
  width:auto;  
  padding: 10px;
}

jQuery

$( document ).ready(function() {
  $(function() {
    $('.pjCsCheckout').each(function() {
      if ($.trim($(this).html()) == '')
         $('.pjCsCheckout').hide();
    });
  });
});

这是它的链接：http://jsfiddle.net/u1zLbjrn/11/

谢谢！

Answer 1

您可以使用CSS做到这一点：

#check a:empty {display: none;}

但是，请注意，:empty并不意味着明显为空，而是基于DOM是空的，也就是说，仅在元素完全不包含任何元素（HTML注释除外）时才适用，甚至可见的文本节点为空（例如，换行符或空白）。有关更多信息，请参见here。

如果#check a包含一个子元素，则上述样式将不起作用。在这种情况下，您必须扩展选择器：

#check a span:empty {display: none;}

请注意，这仅将span隐藏在a元素内，并且由于填充位于a上，仅上述样式不能解决您的问题。您还必须将填充从a移动到内部span。

Answer 2

这是您的操作方式：

$(function() {
    function divCheck() {
        if ($(".pjCsCheckout").innerHTML == "") {
            $("#check").css("display") = none;
        }
    }
});

在您所有表单元素的divCheck属性内调用此onchange函数，如下所示：

<input type="checkbox" onchange="divCheck()">

它将起作用！

当jQuery不包含div时如何隐藏div

2 个答案: