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。

图标的代码是：

<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代码段是：

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.

所以它应该只在页面上重新加载'viewport'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.您在更改事件中触发加载函数或您网页上的其他类型的活动。

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

3 个答案: