Как автоматически перезагрузить раздел страницы с помощью 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 обновляется.

Код для иконы:

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

Так что следует перезагрузить «видовой экран» 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) 

    }); 

Это решение находится в стадии рассмотрения. Я не тестировал это, и я был бы удивлен, если он сработает.

EDIT: Хорошо, я проверил и зафиксировал несколько вещей, и это, похоже, сработает.

Обратите внимание, что я привязал обработчик кликов к этим img элементам. Поэтому вам не нужны те привязки, если вы их не хотите.

Answer 2

Если вы хотите перезагрузить только часть страницы с содержимым HTML (без добавления JavaScript), вы можете использовать .load().

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

Answer 3

Вы хотите $('.viewport').load('/url') заменить окна просмотра»содержимое с новым куском HTML возвращения с сервера из/URL. Вы вызываете эту функцию загрузки один раз, когда страница загружается, и снова в любое время, когда вы хотите заменить содержимое окна просмотра. Возможно, вы захотите сделать некоторые магии типа типа на любом языке шаблонов, который вы используете, чтобы вы могли пропустить начальную загрузку и отобразить начальную страницу в одном запросе вместо 2. Вы запускаете функцию загрузки в событии изменения или другой вид события на вашей странице.