Загрузка и повторное использование контента с помощью jquery

Question

Я новичок в JQuery и мне нужно направление в сом.

Я создал страницу с несколькими кнопками.Когда я нажимаю одну из кнопок, новый контент загружается и помещается в один div.Кнопки остаются видимыми в любое время.

Когда я нажимаю другую кнопку, некоторое другое содержимое загружается с сервера и помещается в тот же элемент div после того, как я его опустошил.

В одном из материалов кнопки у меня есть «слайд-шоу».Когда я несколько раз переключался между контентом, анимация повреждалась.Мне кажется, проблема в том, что я каждый раз перезагружаю контент и снова добавляю его в тот же div.В любом случае, это не очень хороший способ, я должен каким-то образом использовать контент.

Мой вопрос (ы):

1. как загрузить контент с сервера и каким-то образом сохранить его в клиенте
2. проверить, является ли контентзагружен уже
3. повторно использовать контент в следующий раз, когда он должен быть показан, вместо повторной загрузки его с сервера
4. не перекрывая содержимое каким-либо образом

Мои сценарии:

 $(document).ready(function() {
            $("#section2").load("main_mid.php"); 
              $("#taylor_made").click(function () {
                $("#section2").empty();
                $("#section2").load("taylor_made.php"); 
                });

            $("#sm_tool").click(function () {
                $("#section2").empty();
                $("#section2").load("main_mid.php"); 
                });
         });

Мои кнопки:

 <div class="buttons_menu">
        <button id="sm_tool" class="big_buttons" type="button"><img src="sm_tool_button.png" alt="Angry face" /></button>
        <button id="taylor_made" class="big_buttons" type="button"><img src="taylor_made_button.png" alt="Angry face" /></button>
  </div>

Область, к которой добавляется контент:

<div id="section2">

</div>

В моем примере выше я немного упростил мир,На практике будет несколько (10-15) кнопок с различным содержанием.Это может быть немного много, чтобы загрузить все сразу.Я обновляю свой вопрос.На самом деле это обычная веб-страница, на которой меню состоит из кнопок и ссылок.

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

Спасибо заранее!

Answer 1

Либо используйте API данных запроса.http://api.jquery.com/jQuery.data/ или загрузите содержимое в 2 отдельных блока и переключите их с помощью .hide () .show ()

var price_page = null; 
$("#prices").click(function () {
    if(price_page==null){
        $("#section2").load("prices.php", function(data) {
            price_page = data;
            $("#section2").removeAttr("class").addClass("price_mid_area");
        }); 
    }else{
        $("#section2").html(price_page).removeAttr("class").addClass("price_mid_area");
    }
});

Answer 2

Простой способ достичь своей цели - сохранить невидимый div, который может хранить контент и просто добавлять к нему. Или вы можете создать новый невидимый div с содержимым, а затем найти его позже. Например, вы можете сделать что-то вроде:

<div id="storagediv" style="visibility:hidden">

</div>



 $("#sm_tool").click(function () {

        //Check here if you need to do somewith with the existing content.
        $("#storagediv").load("main_mid.php");

                });

Answer 3

Вот так я решаю это с помощью ilia choly :

var price_page; 
$("#prices").click(function () {
                if(price_page==null){
                    $("#section2").load("prices.php", function(data) {
                        price_page = data;                  
                    }); 
                }

                $("#section2").removeClass();
                $("#section2").addClass("price_mid_area");
                $("#section2").empty();
                $("#section2").html(price_page);

            });

- это идентификатор кнопки.

Используя .removeClass и .addClass, я могу также изменить атрибуты css для разных страниц.

Answer 4

Возможно, это решит некоторые из ваших проблем:

Создайте два содержимого div, скажем, "section2_sm_tool" и "section2_taylor_made", один из которых называется "display: none".

В готовом документе загрузите как main_mid.php, так и taylor_made.php в соответствующие контейнеры, как вы уже делаете для main_mid.php.

Затем, при каждом нажатии кнопки, вместо повторной загрузки содержимого, которое вы просто.hide () один div и .show () другой.

В этом подходе предполагается, что содержимое не изменяется, пока пользователь нажимает две кнопки.

Answer 5

вы можете использовать два разных div (один для taylor_made и другой для sm_tool) вместо использования только одного. Вы можете загрузить их при первом нажатии и переключаться между ними в следующий раз.

Answer 6

Храните их в разных скрытых разделах и используйте скрытые разделы в качестве источника вашего контента.Проверьте, если скрытые элементы div имеют дочерние элементы (кроме текстового блока)