Question

我知道如何在点击时切换某个div项目，但如果我不想加载某个项目怎么办？不只是隐藏在页面中，而是在点击之前不加载它？

我知道

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

将加载所有内容，＃item2将被隐藏，直到被点击，但我不希望该项隐藏，我不希望它被加载，直到被点击。我这样做是因为如果我有很多大文件，它会使页面变慢。无论如何要做到这一点：点击#item，然后加载＃item2？

Answer 1

您需要使用Ajax来执行此操作。当用户点击时，异步加载内容，加载完成后再显示。

Answer 2

您必须创建一个包含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();
});

Answer 3

绝对可以：

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

如果您想检查它是否存在，请在此处输入：

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

希望这会有所帮助。干杯

jquery和php：如何仅在点击时加载某些div项目

3 个答案: