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

Question

So there are a few things I want to do. I have a section of HTML that I would like to be displayed on the page by default (ie the first time it loads).

<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>

However, upon clicking an icon I would like for this section to be reloaded as a snippet of javascript is updated.

The code for the icon is:

<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> | 

The JS snippet that is updated is:

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.

So it should reload the 'viewport' div on the page only...not the entire page.

Thoughts?

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)

    });

This is a "pending" solution. I have not tested this and I would be surprised if it works.

EDIT : Alright, I tested and fixed a few things and this seems to work.

Note that I attached a click handler to those img elements. So you don't need those anchor tags if you don't want them.

Answer 2

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

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

Answer 3

You want $('.viewport').load('/url') to replace the viewport' contents with the new chunk of HTML return from the server from /url. You call that load function once when the page loads, and again any time you want to replace the contents of viewport. You might want to do some include type magic in whatever template language you're using to make it so that you can skip the initial load and render the initial page in one request instead of 2. You trigger the load function in a change event or other kind of event on your page.