jQuery 在文档中找到某些 DIV 时在 :after 中显示内容

Question

我在我们的商店上有用户评论选项卡，并在 .tab:after 中添加了图片以使其更显眼。但是我只想在已经有任何用户评论时才显示此内容。

为什么我的代码不起作用？

<script>
$(document).ready(function() {
    if($('.review').length) { 
      $(".tab:after").css("display", "block");
    } 
    else { 
      $(".tab:after").css("display", "none"); 
    }
});
</script>

JSFiddle here

编辑： 谢谢大家！这很神奇：

$(document).ready(function() {
    if($('.review').length >0) { 
        $(".tab").addClass('show-it')
    }
});

CSS:

.tab:after {
    display:none;
    }
.tab.show-it:after {
    display:block;
    }

Answer 1

试试这个：

<script>
$(document).ready(function() {
    if($('.review').length >0) { 
      $(".tab:after").css("display", "block");
    } 
    else { 
      $(".tab:after").css("display", "none"); 
    }
});
</script>

Answer 2

那是因为 ".tab:after" 选择器会 return 一个空集作为 jQuery 而 JavaScript 一般不能 select/manipulate CSS 伪元素。您可以使用 class，切换它并将操作留给 CSS.

.tab.block:after {
    display: block;
    ...
}

$(".tab").toggleClass("block", $(".review").length > 0);

http://jsfiddle.net/tzefrbvr/

Answer 3

您需要删除 :after。请参阅下面的link

JSFiddle

jQuery 在文档中找到某些 DIV 时在 :after 中显示内容

jQuery show content in :after when certain DIV is found in document

jquery

find