使用jQuery 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上的first_page.php ，当单击该按钮时，让它使用.fadeIn()加载response_data.php页面。

我试图使这个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()方法。