Как мне скрыть div в зависимости от того, присутствует ли другой div на странице? - PullRequest
Новая
       0

Как мне скрыть div в зависимости от того, присутствует ли другой div на странице?

0 голосов
/ 05 мая 2020

Я пытаюсь скрыть div на основании наличия другого div на странице.

Вот мой HTML & JavaScript: 

// IIFE to enable `$` as jQuery
;
(function($) {
  // document ready
  $(function() {
    $(document).ready(function() {
      var $description = document.querySelector("#coach2.et_pb_blurb_description");
      if ($description.length) {
        $('#coachtwocol').hide();
      }
    });
  })(jQuery);
<div id="coachtwocol">
  <div id="coach2">
    <div class="et_pb_blurb_content">
      <div class="et_pb_blurb_container">
        <h4><span>Coach:</span></h4>
        <div class="et_pb_blurb_description"></div>
      </div>
    </div>
  </div>
</div>

Идея состоит в том, чтобы скрыть #coachtwocol, если .et_pb_blurb_description отсутствует в # Coach2 (div .et_pb_blurb_description не загружается на страницу, если он не заполнено на задней панели)

Я считаю, что проблема кроется в моем селекторе запросов, но я не уверен, что я делаю с ним не так и как его устранить.

Ответы [ 3 ]

2 голосов
/ 05 мая 2020

#coach2.et_pb_blurb_description ищет ОДИН элемент, у которого есть ИД «Coach2» И класс «et_pb_blurb_description».

Это не так. Вы имеете дело с двумя элементами, один из которых является потомком другого, поэтому вам нужен пробел в вашем селекторе. 

document.querySelector('#coach2 .et_pb_blurb_description')...

[EDIT]

Хорошо, если он все еще не работает, тогда пришло время для некоторой отладки. С селекторами никогда не предполагайте, что они соответствуют тому, что, по вашему мнению, они делают / должны. Так что давайте их протестируем. Я также гармонизирую их оба, чтобы использовать jQuery, поскольку вы, кажется, используете его для одного, а не для другого. 

  let $description = $("#coach2.et_pb_blurb_description"),
      toHide = $('#coachtwocol');
  if ($description.length) {
      console.log('Found selector 1');
      if (toHide.length) {
          console.log('Found selector 2');
          toHide.hide();
      }
  }
0 голосов
/ 05 мая 2020

Попробуйте этот код ниже работает для вас 

<DOCTYPE html>
<html>
<head>
    <title>index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
     $(document).ready(function() {
        var $description = document.querySelectorAll("#coach2");
        if ( $description.length>=0){
            $('#coachtwocol').hide();
        }
    });
</script>
<body>
    <div id="coachtwocol">
        <div id="coach2">
          <div class="et_pb_blurb_content">
                <div class="et_pb_blurb_container">
                      <h4><span>Coach:</span></h4>
              <div class="et_pb_blurb_description"></div>
                  </div>
              </div>
          </div>
      </div>
</html>
0 голосов
/ 05 мая 2020

В вашем коде есть пара опечаток, которые приводят к странному поведению. Во-первых, как упомянул @Utkanos, #coach2.et_pb_blurb_description ищет элемент типа <div id="coach2" class="et_pb_blurb_description">, которого не существует. Вероятно, вы захотите использовать селектор с пробелом, например #coach2 .et_pb_blurb_description, для выбора любых элементов с классом eb_pb_blurb_description, которые являются дочерними элементами элемента с идентификатором coach2.

Если вы сейчас запускаете скрипт, вы получите ошибку: Uncaught SyntaxError: Unexpected end of input, потому что вам не хватает набора закрывающих )}. Кроме того, у вас есть несколько onready функций с немного другим синтаксисом, которые можно очистить.

Удаление дублирующихся onready функций и исправление вашего селектора: 

// IIFE to enable `$` as jQuery
(function($) {
  var $description = $("#coach2 .et_pb_blurb_description");
  if ($description.length) {
    console.log('description exists');
    $('#coachtwocol').hide();
  } else {
    console.log('description does not exist');
  }
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="coachtwocol">
  <div id="coach2">
    <div class="et_pb_blurb_content">
      <div class="et_pb_blurb_container">
        <h4><span>Coach:</span></h4>
        <div class="et_pb_blurb_description"></div>
      </div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...