2012-06-26 3 views
0

Я новичок в jquery. Я изучал, как устанавливать файлы cookie для функции jquery, используя плагин cookie.jquery cookie setup

У меня есть эта простая функция hide и show для div, но вы хотите, чтобы состояния классов сохранялись после ссылок на другие страницы и обновлялись.

JS выглядит следующим образом

<script type="text/javascript"> 

$(document).ready(function(){ 

    $("div.toggle_search").hide(); 
    $("h2.trigger_up").click(function() { 
    $(this).toggleClass("active").prev().slideToggle(250); 
     if ($.cookie('more_search','1')) { 
     $("#criteria").attr('class', $.cookie('more_search')); 
    } else { 
     $("#criteria").attr('class', 'active'); 
    } 
    $.cookie('more_search', $(".trigger_up").attr('class')); 
      return false; 
    }); 

}); 

</script> 

HTML

<div id="criteria"> 
    <div class="toggle_search">  
     <div class='left'> 
      Stuff goes here 
     </div> 
    </div> 
    <h2 class="trigger_up"><a href="#">See More Search Criteria</a></h2> 

    <div class="clear"></div> 
</div> 

Любая помощь будет высоко оценен. !

+0

Я ценю ответ. Но я решил пойти со вторым вариантом и начать все заново. Благодаря! – Lpillory

ответ

0

Проверьте файл cookie перед тем, как показать или скрыть div. В этом фрагменте DIV с идентификатором = «MOREBUTTON» (не фактический кнопка) имеет текст говоря «Больше» или «Меньше» для отображения и скрытия DIV с идентификатором = «moreOptions»:

$(document).ready(function() {             
    if ($.cookie("show") == "show") {          
     $("#moreButton").html("Less «");         
     $("#moreButton").attr("title", "Hide the extra search parameters."); 
     $("#moreOptions").show();          
    }                  
    else {                 
     $("#moreButton").html("More »");         
     $("#moreButton").attr("title", "See more search options.");  
    }                  

    $("#moreButton").click(function() {          
     $("#moreOptions").animate({ "height": "toggle" }, { duration: 60 }); 
     if ($("#moreButton").html() == "More »") {      
      $("#moreButton").html("Less «");       
      $("#moreButton").attr("title", "Hide the extra search parameters."); 
      $.cookie("show", "show", { path: '/' })     
     }                
     else {               
      $("#moreButton").html("More »");       
      $("#moreButton").attr("title", "See more search options."); 
      $.cookie("show", "", { path: '/' })      
     };                
    });                  


}                    
       ); 
+0

Спасибо! Я использовал это, и он работает. Я все еще смотрю на добавление направленного значка, добавленного в строку html. Я попробовал пару вещей, но он немного ударил. – Lpillory

+0

Извините, что я закрыл преждевременно. Я смотрю http://api.jquery.com/html/, чтобы узнать, как добавлять изображения. Это хорошее место для просмотра? Опять же, спасибо! – Lpillory

+0

@ Lpillory Да, вы можете установить innerHtml с помощью этого метода jquery, например. установив его на что-то, включая тег . Если у вас возникнут дополнительные вопросы, вы должны задать новый вопрос. –

0

Есть ли у вас включена ссылка на библиотеку jQuery-cookie?

Смотрите документацию, найденную здесь, на странице плагина он выглядит, как вы используете или пытаетесь использовать, https://github.com/carhartl/jquery-cookie/

Устанавливая печенье истекает в будущем, она должна сохраняться, пока не достигнет истечения срока годности.

Ex: $.cookie('more_search', $(".trigger_up").attr('class'), { expires: 7 }); // Срок действия истекает через неделю.

заметить Также у вас есть два класса, когда вы получаете $(".trigger_up").attr('class') trigger_up и активный (при щелчке на ссылке в первый раз), вы можете разобрать, что значение куки устанавливаются в «активный»