Показать один div и скрыть другое, если label = empty

71
7

Я смог эффективно показать div, если метка пуста (что сообщает пользователю, что интернет-соединение не найдено), что я и хочу.

Однако я также хочу скрыть #activateform если метка пуста.

С моей текущей настройкой #activateform становится скрытой, когда функция запускается, даже если ярлык заполнен, что не то, что я хочу. Я попытался использовать оператор if (см. Нижний блок кода), но не смог заставить его работать.

Вот мой html:

<div class="form-group" style="display:none">
<label id="internet_ipaddr" for="internet_ipaddr" class="tbh"></label>
<h4> You don't seem to be connected to the internet </h4>
</div>

<div id="activateform"> This has to be hidden if label = empty </div>

И мой сценарий:

$(document).ready(function(){
setTimeout(function(){
$("div.form-group label.tbh:empty").parent().show();
$("#activateform").hide();
},2000);
});

И моя попытка сделать это, только если label = empty:

$(document).ready(function(){
setTimeout(function(){
if $("div.form-group label.tbh").empty() {
$("#activateform").hide();
}
},2000);

спросил(а) 2018-01-19T16:47:00+03:00 2 года, 9 месяцев назад
1
Решение
81

Функция empty() удаляет все содержимое из выбранных элементов и не возвращает логические, но выбранные элементы после удаления всего содержимого. Итак, ваше условие, if $("div.form-group label.tbh").empty() { никогда не будет истинным, потому что элемент label не является ложным.

Вы можете использовать функцию html(), которая возвращает содержимое элемента и сравнивает это значение с пустой строкой, примерно так:

$(document).ready(function(){
setTimeout(function(){
if ($("div.form-group label.tbh").html() == "") {
$("#activateform").hide();
}
},2000);

Ref:

функция empty()

функция html()

ответил(а) 2018-01-19T17:03:00+03:00 2 года, 9 месяцев назад
58

Метод empty() не проверяет, является ли элемент пустым, он предназначен для удаления всего его содержимого (то есть опорожнения). Чтобы проверить, пуст ли он, вы можете использовать is(':empty'), аналогично тому, что вы использовали в первой попытке.

Примечание. Я не знаю, почему вы откладываете его на 2 секунды, используя setTimeout, но я сохранил этот код.


$(document).ready(function() {
setTimeout(function() {
var label = $("div.form-group label.tbh");
if ($("div.form-group label.tbh").is(':empty')) {
label.parent().show();
$("#activateform").hide();
}
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" style="display:none">
<label id="internet_ipaddr" for="internet_ipaddr" class="tbh"></label>
<h4> You don't seem to be connected to the internet </h4>
</div>
<div id="activateform"> This has to be hidden if label = empty</div>

ответил(а) 2018-01-19T16:59:00+03:00 2 года, 9 месяцев назад
58

Вы можете использовать комбинацию метода .is() и :empty селектор

setTimeout(function() {
var elem = $("div.form-group label.tbh");
if (elem.is(':empty')) {
elem.parent().hide();
$("#activateform").hide();
} else {
elem.parent().show();
}
//Rest of your code
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" style="display:none">
<label id="internet_ipaddr" for="internet_ipaddr" class="tbh"></label>
<h4> You don't seem to be connected to the internet </h4>
</div>

ответил(а) 2018-01-19T16:52:00+03:00 2 года, 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема