使用jQuery onClick按钮淡入PHP脚本

Question

I have a PHP script labeled first_page.php. On that page, I currently have a div that looks like this:

<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>

And links to the correct page, response_data.php. What i'd really like to have instead, is a button that is on the first_page.php, and when that button is clicked, have it load the response_data.php page with .fadeIn().

I've tried to get this jQuery script working, with no luck. Here is what I have tried. I've changed my html to look like this:

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

Above, I have added a button and a div that I wanted to fadeIn. The div holds the php script, so I wanted the div to fade the php script in. I set the data CSS to display none. When I click the button, nothing happens. It actually works, but the div data fade's in without having had the button clicked. Then the button remains. I'd like it to not auto click, and also somehow hide the button after the first click.

Answer 1

The jQuery part is just fine. I highly suggest to check that your div#data actually has some text in it.

To do so, you can try something like:

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

Also, to hide the button after it was clicked simply use the hide() method:

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

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

});

Note: You can also use the fadeOut() method or the remove() method if you wish to remove the button from the DOM.