【问题标题】：Not picking the script tag condition in DOM未在 DOM 中选择脚本标记条件
【发布时间】：2018-04-27 03:35:27
【问题描述】：

当特定类在 DOM 中可用时，不选择条件。仅当 availablediv 类在 DOM 中可用时才需要启用以下脚本。但是即使在 DOM 中存在 availablediv 类时，这种情况也不会被选中。

<script>

$(document).ready(function(){
if($('.availablediv').length > 0){
$('head').append('<style type="text/css">.data {
      width: 5%;
}
    .presalesDiv .callPlans h3 {
font-size: 15px !important;
}   
.handsetDiv .callPlans p {
    font-size: 14px !important;
}
.upfront ul li {
    display: block;
}</style>');

} 
});
</script>

以下是显示 div 的角度 ng-if 条件，该条件运行良好。

<div class="availablediv" ng-if="data.cluster_desc_count > 0">
                                        <div ng-if="data.cluster_scode">

                                            <ul>
                                                <li>{{data.clusterData}}</li>
                                                <li>{{data.clusterSpeed}}</li>
                                            </ul>
                                        </div>

</div>

【问题讨论】：

您想修改特定 div 的 h3 标签字体大小吗？如果是，那么您可以通过角度实现同样的目标
当 DOM 中存在 availablediv 类时，我也想修改其他 div 的样式
在什么情况下或什么时候 'availablediv' 类将出现在 DOM 中
ng-if="data.cluster_desc_count > 0" - 基于此条件。我在 div 本身中提到过
试试

标签： jquery html angularjs

【解决方案1】：

不要在 jquery 中使用角度混合。该解决方案会造成一些混乱。因为 angular 和 jquery 是不同的绑定到 DOM。

所以当文档准备好时，也许 div .availablediv 不会可用

不要使用追加到头部。这使您的代码非常糟糕

如果你想观察元素并添加css，我建议你使用：

1。使用 $rootScope 向 body 添加类

scope.$watch('data.cluster_desc_count', function(value) {
       if (value > 0) {
          $rootScope.isClusterDescCount = true;
       } else {
          $rootScope.isClusterDescCount = false;
       }
    });

并使用$rootScope.isClusterDescCount 将类添加到正文。

<body ng-app="app" ng-class="{isClusterDescCount: 'is-have-cluster'}">

你的 CSS 将是

body.is-have-cluster .presalesDiv .callPlans h3 {
font-size: 15px !important;
}   
body.is-have-cluster .handsetDiv .callPlans p {
    font-size: 14px !important;
}
body.is-have-cluster .upfront ul li {
    display: block;
}

2。您可以使用 jquery 将类添加到正文中，例如

scope.$watch('data.cluster_desc_count', function(value) {
   if (value > 0) {
      $('body').addClass('is-have-cluster');
   } else {
      $('body').removeClass('is-have-cluster');
   }
});

css 是一样的

希望有帮助

【讨论】：

感谢您的回复。你能告诉我如何使用 $rootScope.isClusterDescCount 将类添加到正文。