Проверьте и очистите все открытые div с определенным классом внутри контейнера

0

Я пытаюсь проверить и очистить любой div с помощью demoForm класса, которые находятся внутри контейнера div. demoForm div скрыты по умолчанию при загрузке страницы, но появляется, когда пользователь нажимает на addUser ссылку. Он может появляться в нескольких местах, поскольку ссылка доступна в нескольких местах.

Перед добавлением нового я хотел бы очистить все существующие в контейнере, которые раньше были созданы пользователем.

В настоящее время я делаю:

$(".addUser").click(function(){
        $('.demoForm').hide();
    });

Как я могу использовать if else или что-то подобное, чтобы проверять только открытые и закрывать их, а не просто делать так, как я.

<!DOCTYPE html>
<html>
<head>
<title>Generated by Edit Plus</title>
<link rel="stylesheet" href="http://localhost/site/css/bootstrap.css" media="screen">
<script type="text/javascript" src="http://localhost/site/scripts/jQueryCore.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".addUser").click(function(){
        $('.demoForm').hide();
    });
    });
</script>

<style type="text/css">
.toolOptions{
    display:none;
}
</style>
</head>

<body>

<div class="container">
    <div class="addUser">Add a new user</div>

    <div class="demoForm">
    I'm the form div.
    </div>

    <div class="demoForm">
    I'm the form div.
    </div>

    <div class="demoForm">
    I'm the form div
    </div>
    </div>

</body>
</html>
  • 1
    «Как я могу использовать if if или что-то в этом роде, чтобы проверять только открытые и закрывать их, вместо того, чтобы просто делать то, что сделал я». Что плохого в вашем решении? Что в этом вы хотите изменить? Я имею в виду, что вы можете использовать псевдоселектор :visible , но нет веской причины, если вы не хотите, чтобы какой-либо из них оставался видимым.
  • 0
    @T.J.CrowderВ этом нет ничего плохого, просто мне это показалось неправильным. Настройка их всех, чтобы скрыть, даже если они не были скрыты.
Показать ещё 2 комментария
Теги:

3 ответа

1
Лучший ответ

Нет необходимости использовать здесь инструкцию If else. Вы можете легко сделать это с помощью :visaible

Например

$(".addUser").click(function(){
    $('.demoForm:visible').hide();
});

ИЛИ

$(".addUser").click(function(){
    if($('.demoForm').is(':visible')){
      $('.demoForm').hide();
    }
});

ИЛИ

$(".addUser").click(function(){        
    if($('.container').find('.demoForm').is(':visible')){
      $('.container').find('.demoForm').hide();
    }
});

ИЛИ

$(".addUser").click(function(){
    $('.container').find('.demoForm:visible').hide();
});
Поделиться
  • 0
    нет его нет .. проверьте здесь api.jquery.com/category/version/1.0
  • 0
    Любая идея, почему я получаю сообщение об ошибке при использовании вашего второго и третьего примера?
Показать ещё 4 комментария
2

Вы можете выбрать все видимые div, используя :visible селектор и скрывать их: -

$(".addUser").click(function () {
    $('.demoForm:visible').hide();
});
Поделиться
1

Использование :visible:

$(".addUser").click(function(){
    $('.demoForm:visible').hide();
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню