Question

这里是jquery的新手，我一直在学习如何显示/隐藏div。我想更进一步，能够用AJAX调用替换div，而不是显示隐藏的div。

在这个例子中，我一直在努力，'expand'按钮隐藏div.post-small并显示div.post-big

http://jsfiddle.net/ejwFr/

我将如何开始修改它，以便'expand'按钮隐藏div.post-small并用一个AJAX请求替换div.post的内容（这将返回一个假设的div.post-big-ajax）

非常感谢任何见解!!

Answer 1

使用load()方法

描述：从服务器加载数据并放置返回的HTML 进入匹配的元素。

示例

$("div.expand").click(function() { $(this).parent('.post-small').hide(); $(this).parent().next().load('ajax/content.html'); });

Load()通过AJAX调用从服务器获取数据，并将匹配元素的HTML内容设置为返回的数据。

Answer 2

我想你想要like this jsfiddle update ......

Answer 3

你可能想要这样的东西，如果需要的话，在通过ajax加载html之前检查div是否有内容。 load方法检索数据并将元素的html内容设置为已返回的内容。

$("div.expand").click(function() {
    $(this).parent('.post-small').hide();

    //if content exists, ajax has been executed just show the div
    if ($(this).parents('.post').find('.post-big').text().length > 0) {
        $(this).parent('.post').find('.post-big').show("slow")
    }
    else {
        //perform the ajax call to the page set up to return the content
        $(this).parent('.post').find('.post-big').load('ajax/content.html');
        $(this).parent('.post').find('.post-big').show("slow")
    }

});

也可以在这个jsfiddle http://jsfiddle.net/FMjum/

中看到

jquery：用URL获取请求替换div而不是显示隐藏的div

3 个答案: