Показать div, если другой div имеет контент

Question

Так что я не понимаю, почему это не работает. Я хочу показать Div, когда другой div имеет значение. Я получил этот код из stackoverflow, и это довольно просто. Но это не работает для меня. Нет консольных ошибок ..

$(document).ready(function(){ 
    if ($(".txt").html().length > 0) { 
    $('.btn-01').show(); 
    }           
}); 

Если HTML значение .txt больше, то 0, то показывают btn-01.

Но это не так. В моем веб-инспектора он просто говорит:

<div style="display: block;" class="btn-01"><p>Things</p></div> 

Если удалить скрипт он говорит:

<div class="btn-01"><p>Things</p></div> 

Так что делает что-то делать. Я попытался изменить show на hide. Но не уходи.

<div style="display: none;" class="btn-01"><p>Things</p></div> 

Я пробовал:

$(document).ready(function(){ 
     if ($(".txt").html().length > 0) { 
     $('.btn-01').addClass('showme); 
     }           
    }); 

БТН-01 CSS:

.btn-01 { 
    background: #f60; 
    color: #fff; 
    border-radius: 2px; 
    padding: 5px; 
    text-align: center; 
    margin: 40px auto 0px auto; 
    width: 90%; 
} 

Но это не сработало. Кто-нибудь знает, что здесь происходит? Может быть, я должен работать с заявлением else? Помощь будет высоко оценена.

JsFiddle

Answer 1

Вам нужно либо установить кнопку для отображения ни перед к окну загрузки или добавить «еще» заявление, чтобы скрыть элемент:

.btn-01{ 
    display:none; 
} 

ИЛИ

$(document).ready(function(){ 
     if ($(".txt").html().length > 0) { 
     $('.btn-01').show(); 
     } 
     else 
     { 
     $('.btn-01').hide(); 
     } 
    }); 

Посмотреть скрипку: https://jsfiddle.net/r89gg7tp/

ВАЖНО ДЛЯ РАССМОТРЕНИЯ

Если вы ввели разрыв строки между начальным и закрывающим тегами элемента, это добавит длину. Вы должны установить txt DIV быть в следующем формате:

<div class='txt'></div>

Это может быть лучше, чтобы изменить свою функцию следующим образом:

$(document).ready(function(){ 
     if ($(".txt").html().trim(' ').length > 0) { 
     $('.btn-01').show(); 
     } else { 
     $('.btn-01').hide(); 
     } 
    }); 

Таким образом, вы обрезать пробелы перед проверкой.

Смотрите вторую скрипку: https://jsfiddle.net/r89gg7tp/3/

Answer 2

Это может помочь вам.

$(document).ready(function(){ 
     if (!$.trim($(".txt").html())){ 
      $('.btn-01').addClass('showme'); 
     }           
}); 

Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы.

Answer 3

Вы можете использовать .contents() с .toggle():

$(document).ready(function() { 
 
    $('.btn-01').toggle($(".txt").contents().length > 0); 
 
});

.btn-01{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="txt"> 
 
    <h3>Things Title</h3> 
 
</div> 
 

 
<div class="btn-01"> 
 
    <p>Things</p> 
 
</div>

Answer 4

Вы должны скрыть БТН-01 с "дисплеем: нет" в таблицу стилей и затем выполнить ваш скрипт. Я думаю, что у вас есть «display: none! Important», который переопределяет встроенный стиль функции jquery show().

Answer 5

Вы, ребята, где все в порядке. Мне нужно было поместить код в некоторый файл сеанса (Ajax). Теперь он работает с исходным кодом и даже с некоторыми, которые вы предоставляете.

Спасибо!