jquery和php:如何仅在单击时加载特定的div项。

I know how to toggle a certain div item on click, but what if I don't want a certain item to load yet? Not just hide in the page, but do not load it until it is clicked?

我知道如何在单击时切换某个div项目，但如果我还不想加载某个项目，怎么办?不仅隐藏在页面中，而且在单击之前不要加载它?

I know that

我知道

$(document).ready(function(){
   $('#item').click(function(){
          $('#item2').toggle();
   });
});

will load everything and #item2 will be hidden only until clicked, but I don't want the item to hide, I don't want it to load until clicked. I'm doing this because if I have a lot of large files, it will slow the page. is there anyway to do this: click #item, then load #item2?

将加载所有内容，并且#item2将被隐藏直到单击，但是我不希望该项目隐藏，我不希望它在单击之前加载。我这样做是因为如果我有很多大文件，它会使页面变慢。是否有这样的操作:单击#item，然后加载#item2?

3 个解决方案

#1

You will have to create a separate file containing the content of the div (in this example, pagesource.php), and then use asynchronous loading with AJAX. See jQuery.get

您必须创建一个包含div内容的独立文件(在本例中为pagesource.php)，然后使用AJAX进行异步加载。看到jQuery.get

$('#item').click( function() {
    // Load page the first time it is clicked (assuming the inner HTML of the div is blank)
    if( $('#item2').html() == '' ) {
        $.get( 'pagesource.php', function(data) {
            $('#item2').html(data);
        });
    }
    $('#item2').toggle();
});

#2

You need to use Ajax to do this. When the user clicks, load the content asynchronously and when it's done loading then show it.

您需要使用Ajax实现这一点。当用户单击时，异步加载内容，加载完成后显示内容。

#3

Definetely you can:

最终,您可以:

$(document).ready(function(){
   $('#item').click(function(){
          //This line will create 'item2' div dynamically
          $('<div id="item2" />').hide().appendTo("body").toggle();
   });
});

If you want to check if it exists, here you have:

如果你想检查它是否存在，这里有:

$(document).ready(function(){
   $('#item').click(function(){              
          $item2 = $("#item2");
          if($item2.size() == 0) //Will create item2 if it doesn't exist
             $item2 = $('<div id="item2" />').hide().appendTo("body");
          $item2.toggle();
   });
});

Hope this helps. Cheers

希望这个有帮助。干杯

#1