需要的代碼，以便cookie可以記住格開閉狀態的jQuery

-3

我需要的代碼，以便系統記住，如果被顯示或隱藏它，所以它刷新頁面後，在那裏停留了div的狀態。需要的代碼，以便cookie可以記住格開閉狀態的jQuery

我看了所有的解決方案，我可以找到，但我沒有得到任何地方，沒有小代碼片段的例子，適合在我的代碼，或者我只是做一些錯誤

我有這樣的代碼來顯示/隱藏分區

<script type="text/javascript" src="{INCURL}themes/{THEME}/js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="{INCURL}themes/{THEME}/js/jquery.cookie.js"></script> 

<script type="text/javascript"> 
    function HideContent(d) { 
     document.getElementById('shownews').style.textDecoration = 'none'; 
     document.getElementById(d).style.display = "none"; 
    } 
    function ShowContent(d) { 
     document.getElementById(d).style.display = "block"; 
    } 
    function ReverseDisplay(d) { 
     if(document.getElementById(d).style.display == "none") { 
      document.getElementById(d).style.display = "block"; 
     } else { 
      document.getElementById(d).style.display = "none"; 
     } 
    } 
</script> 

<a id="shownews" class="icons showhide" href="javascript:ReverseDisplay('news')"> 
<div id="news" style="display:none;" class="infobox">{newsbox.TITLE}<br>{news.CONT}</div>

它工作正常只是我不能解決的餅乾謎題。

來源

2013-05-22 mastodont

根本沒有jQuery？（ – hjpotter92

）首先，這裏有0個jquery在使用，你應該真的放棄你的工作，花時間學習你即將使用的lib的「Awesome Power」。的代碼，谷歌[jQuery.cookie（http://bit.ly/10lXodI）。第三，你要麼一個完整的結點（在這種情況下，不要不好意思，所以說，我們都曾經），或者你的避風港我沒有研究過下蹲（「*閱讀所有我能找到的解決方案*」），因爲在線上有關於製作餅乾的信息的TON。 – SpYk3HH

不，我剛剛準備好系統的代碼沒有點發布的代碼不工作; ） – mastodont

，當你打開它，closed（或刪除的cookie）當您關閉它設置一個cookie open。然後，當你加載頁面，你可以檢查該值：

$(document).ready(function() { 
    $("#shownews").click(function() { 
     ReverseDisplay("news"); 
    }); 

    if ($.cookie("state") == "open") 
     ShowContent("news"); 
}); 

function HideContent(d) { 
    document.getElementById('shownews').style.textDecoration = 'none'; 
    document.getElementById(d).style.display = "none"; 
} 

function ShowContent(d) { 
    document.getElementById(d).style.display = "block"; 
} 

function ReverseDisplay(d) { 
    if (document.getElementById(d).style.display == "none") { 
     document.getElementById(d).style.display = "block"; 
     $.cookie("state","open"); 
    } else { 
     document.getElementById(d).style.display = "none"; 
     $.cookie("state","closed"); 
    } 
}

樣品小提琴：http://jsfiddle.net/c7quz/1/

來源

2013-05-22 14:20:40

謝謝你約翰Koerner好的代碼和鏈接到小提琴:) – mastodont

從哪裏開始。首先，你說這是jQuery，但你的代碼示例不使用jQuery。其次，如果您希望在頁面重新加載時保留它，則需要使用LocalStorage或Cookies。

嘗試類似這樣的東西。將所有您希望使用此代碼的標籤分類到同一個類中。 'showhide'或類似的東西。也分類你的div。 'showhide_div'。的想法是，每個它們的標籤被點擊一次，你要切換相應div的視圖（顯示/隱藏），並將其存儲在一個cookie/localStorage的狀態。只要確保你的a/div標籤都有ID。

現在，你的鏈接不應使用HREF = 「JavaScript的：ReverseDisplay（ '新聞'）」。你也不需要所有的HideContent（）/ ShowContent（）等。功能。這樣做的jQuery的方式：

的標籤看起來就像這樣：

<a id="shownews" data-divid="news" class="icons showhide" href="#">

jQuery的將是這樣的：

$(document).ready(function() { 
    $('div.showide_div').each(function() { 
    var disp = $.cookie($(this).attr('id')); 
    if (disp!='' && disp!=null) { $(this).css('display',disp); } 
    }); 


    $('a.showhide').on('click',function() { 
    var divid = $(this).data('divid'); 
    var div = $('#' . divid); 
    if (div.length>0) { 
     div.toggle(); 
     $.cookie(divid, div.css('display'),0); 
    } 
    }); 

});

請記住，這可以得到一種勢不可擋如果有很多div。也不建議（a）使用cookies太多，並且（b）使用太多。你可以隨時將它存儲在1個cookie中，或者像我說的那樣，localstorage對於這樣的事情非常有用，並且可以避免很多開銷。我上面的代碼只是可以做的一個例子。這完全取決於你。 :) 希望這會有所幫助。我事先對代碼中的任何錯誤表示歉意。

來源

2013-05-22 14:31:42 Morfie

謝謝Morfie你的所有建議和代碼正是我需要的，因爲我有很多的div需要在我的網頁上設置，需要一些好的系統，讓他們都在同一個地方。好信息。現在我可以在:) – mastodont

很高興幫助！如果它最終解決了您的問題，請將我的答案標記爲已批准的答案。 :)不要猶豫，讓我知道你是否需要任何幫助。 – Morfie

需要的代碼，以便cookie可以記住格開閉狀態的jQuery

回答

相關問題