php - 带有 jQ​​uery onClick 按钮的 fadeIn php 脚本

Question

我有一个标记为 first_page.php 的 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 数据在没有单击按钮的情况下淡入。然后按钮仍然存在。我希望它不自动点击，并且在第一次点击后以某种方式隐藏按钮。

Answer 1

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();

});

注意:如果您希望从 DOM 中删除按钮，也可以使用 fadeOut() 方法或 remove() 方法。