FadeIn PHP скрипт с кнопкой JQuery OnClick

Question

FadeIn PHP скрипт с кнопкой JQuery OnClick

У меня есть PHP-скрипт с именем first_page.php. На этой странице у меня есть div, который выглядит так:

<div id="status">
<h3>To view a list of all rooms statuses, select the link below.</h3>
<a href="response_data.php" class="button">Show Status</a>
</div>

И ссылки на правильную страницу, response_data.php, Вместо этого мне бы хотелось, чтобы кнопка была на first_page.phpи когда эта кнопка нажата, она загружает response_data.php страница с .fadeIn(),

Я пытался заставить работать этот скрипт jQuery, но безуспешно. Вот что я попробовал. Я изменил свой HTML, чтобы выглядеть так:

<button id="button">Click here to show data</button>
<div id="data" style="display: none;">
<?php include 'response_data.php' ?>
</div>$('#button').click(function() {
$('#data').fadeIn(1000);
});

Выше я добавил кнопку и div, которые я хотел добавить. Div содержит скрипт php, поэтому я хотел, чтобы div замирал скрипт php. Я установил CSS для данных, чтобы он не отображался. Когда я нажимаю кнопку, ничего не происходит. Это на самом деле работает, но данные div исчезают без нажатия кнопки. Тогда кнопка остается. Я бы хотел, чтобы он не нажимал автоматически, а также как-то скрывал кнопку после первого нажатия.

0

css fadein html jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Часть JQuery просто отлично. Я настоятельно рекомендую проверить, что ваш div#data на самом деле есть текст в нем.

Для этого вы можете попробовать что-то вроде:

console.log($('#data').text().length > 0 ? 'Text found' : 'Could not find text');

Кроме того, чтобы скрыть кнопку после нажатия, просто используйте hide() метод:

$('#button').on('click', function() {

$('#data').fadeIn(1000);
$(this).hide();

});

Примечание: вы также можете использовать fadeOut() метод или remove() метод, если вы хотите удалить кнопку из DOM.

1