динамически показывая и скрывая div с JavaScript

Question

динамически показывая и скрывая div с JavaScript

0

В настоящее время у меня есть следующий код для моей системы входа:

function handleLogin() {
    var e = $("#username").val();
    var p = $("#password").val();

    if(e != "" && p != "") {
        $.ajax({ 
            type: 'POST', 
            url: 'http://localhost/php/log.php', 
            crossDomain: true,
            data:  {username: e, password :p},
            dataType: 'json', 
            async: false,
            success: function (response) { 
                if (response.success) { 
                    alert("Your login worked");
                    $('#loginTest').html(e);
                } else {
                    alert("Your login failed");
                }
            },
            error: function(error) {
                alert('Could not connect to the database' + error);
            }
        }); 
    } else {
        alert("You must enter username and password");
    }
    return false;
}

Когда логин сработал, я получаю правильное предупреждение, но потом я хочу, чтобы окно входа в систему скрывалось, а div под ним отображался с именем пользователя (e).

Поэтому в основном мне просто нужно выяснить, как скрыть текущий div, а затем показать еще один.

Входной логин называется #loginPage, а div ниже него называется #loginTest

Carla Dessi 16 апр. 2014, в 10:58

Источник

1

Вы используете jquery Ajax и не можете заставить работать простой $ ('# loginPage'). Hide ()?
Fuzzyma 16 апр. 2014, в 08:55
0

@Fuzzyma Fuzzyma Действительно. Я предполагаю, что ОП изначально не писал этот код.
Rory McCrossan 16 апр. 2014, в 08:57

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

Вы используете jquery Ajax и не можете заставить работать простой $ ('# loginPage'). Hide ()?
@Fuzzyma Fuzzyma Действительно. Я предполагаю, что ОП изначально не писал этот код.

Rory McCrossan · Answer 1 · 2014-04-16T06-27-00.000Z

Вы можете использовать hide() и show():

if (response.success) { 
    $('#loginPage').hide();
    $('#loginTest').show().html(e);
}

Также есть fadeIn, fadeOut, slideUp, slideDown чтобы иметь дело с отображением/скрытием элементов. Вы даже можете использовать animate чтобы определить свой собственный переход. API всегда является вашим другом в этих ситуациях.

Geeky Ninja · Answer 2 · 2014-04-16T07-00-00.000Z

Чтобы показать и скрыть какой-либо конкретный элемент HTML, вы можете использовать функции show() и hide() этого элемента. Изначально вы можете скрыть свой логин loginTest и показать только div.

Попробуй это:

function (response) { 
                if (response.success) { 
                    $(#loginPage).hide(); //Hiding login page div
                    $(#loginTest).show(); //Showing login test div
                    alert("Your login worked");
                    $('#loginTest').html(e);
                } else {
                    alert("Your login failed");
                }

Вы также можете добавить время для показа и скрытия своего DIV. Как $(#loginPage).hide("fast"); и $(#loginTest).show("slow"); , Это полностью зависит от вас, что вам нужно.