Не выбирает условие тега скрипта в DOM - PullRequest
Новая
       3

Не выбирает условие тега скрипта в DOM

0 голосов
/ 27 апреля 2018

Не выбирает условие, когда определенный класс доступен в 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>

Ниже приведено угловое условие ng-if для отображения div, и условие работает нормально. 

<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>

1 Ответ

0 голосов
/ 27 апреля 2018

  1. Не используйте угловую смесь с jquery. Это решение внесет некоторую путаницу. Потому что angular и jquery по-разному связаны с DOM.

    Так что, когда документ готов, возможно, div .availablediv не будет доступны

  2. Не используйте append to head. Это делает ваш код очень плохим

Если вы хотите посмотреть элемент и добавить CSS, я предлагаю вам использовать:

1. Используйте $ rootScope для добавления класса в тело 

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 будет такой же

Надеюсь, эта помощь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...