如何在不刷新整个页面的情况下使用 jQuery 自动重新加载页面的一部分？

Question

所以有几件事我想做。我有一段 HTML 希望默认显示在页面上（即第一次加载时）。

<div class="viewport">
        <ul class="overview">           
            <li><img src="images/1.png" /></li>
            <li><img src="images/2.png" /></li>
            <li><img src="images/3.png" /></li>         
            <li><img src="images/4.png" /></li>
            <li><img src="images/5.png" /></li>
            <li><img src="images/6.png" /></li>
            <li><img src="images/7.png" /></li>         
        </ul>
    </div>

但是，在单击一个图标时，我希望在更新了 javascript 的 sn-p 时重新加载此部分。

图标的代码是：

<a href="#"><img src="images/2.png" id="icon#2"></a> | 
<a href="#"><img src="images/3.png" id="icon#3"></a> | 
<a href="#"><img src="images/4.png" id="icon#4"></a> | 

更新的JS sn-p是：

var win_width = $(window).width();
var num_of_images = 2; // This should be changed to 3, when 3 is clicked, and 4 when 4 is clicked, etc.

所以它应该只重新加载页面上的“视口”div...而不是整个页面。

想法？

Answer 1

    $(function () {

        var num_of_images = 2,
            showAndHide;

        $("img[id^=icon]").bind("click", function () {
            num_of_images = parseInt(this.id.replace("icon#", ''), 10);
            showAndHide(num_of_images);
        });

        (showAndHide = function (n) {
            $("ul.overview").hide() // hide this while we "do work"
               .children() // get children
                  .show() // show all children
                  .filter(":nth-child(" + n + ") ~ li") // get the next siblings of the nth child
                     .hide() // hide them
                  .end()
               .end()
            .show(); // show the parent list
        })(num_of_images)

    });

这是一个“待定”的解决方案。我没有对此进行测试，如果它有效，我会感到惊讶。

编辑：好的，我测试并修复了一些东西，这似乎有效。

请注意，我为这些img 元素附加了一个点击处理程序。因此，如果您不想要这些锚标记，则不需要它们。

Answer 2

如果您只想重新加载包含 HTML 内容的页面的一部分（不添加 JavaScript），那么您可以使用 .load()。

$('div#content').load('morecontent.php');

Answer 3

您希望$('.viewport').load('/url') 将视口的内容替换为服务器从 /url 返回的新 HTML 块。您在页面加载时调用该加载函数一次，并在您想要替换视口的内容时再次调用。您可能希望在您使用的任何模板语言中执行一些包含类型魔术，以便您可以跳过初始加载并在一个请求而不是 2 中呈现初始页面。您在更改事件中触发加载函数或您页面上的其他类型的事件。