jquery顯示/隱藏重置頁面時重新加載

Question

我是jquery的新手，但我試圖用它來創建一個多步驟的選項卡式窗體。

其中的一個網頁，我有單選按鈕，將顯示這取決於對，在選擇了幾個字段。

我發現的問題是，如果用戶選擇一個單選按鈕，頁面重新加載後刷新頁面，並隱藏所有的div，但它會記住所選的單選按鈕選擇。

有沒有辦法最初隱藏的div而不明確告訴它載入網頁後會發生什麼？也許有一些（簡單）讓jquery記住div是隱藏的還是顯示的？

謝謝！

<label for="paymentmethod">Payment Method</label> 
<input type="radio" name="paymentmethod" id="paymentmethod" value="creditcard">Visa/Mastercard 
<input type="radio" name="paymentmethod" id="paymentmethod" value="cheque">Cheque 

<div id="divcredit"> 
Stuff 
</div> 

<div id="divcheque"> 
Stuff 
</div> 

這裏是jQuery代碼我有：在配置更改事件

$(document).ready(function() { 

//...stuff 

$("#divcredit").hide(); 
$("#divcheque").hide(); 

$("input[name='paymentmethod']").change(function() { 
    if($("input[name='paymentmethod']:checked").val() == "cheque") 
    { 
     $("#divcredit").hide(); 
     $("#divcheque").show(); 
    } 
    else if($("input[name='paymentmethod']:checked").val()== "creditcard") 
    { 
     $("#divcredit").show(); 
     $("#divcheque").hide(); 
    } 
}); 

Answer 1

var setPaymentDivs = function() { 
    var selected = $('input[name="paymentmethod"]:checked').val(); 
    $('div.payment').hide(); 
    $('#div' + selected).show(); 
}; 

$(function() { 
    setPaymentDivs(); 
    $('input[name="paymentmethod"]').change(setPaymentDivs); 
}); 

並將class="payment"添加到div。這濫用了後退按鈕和刷新記住表單值的事實。

另一種方式是某處編碼當前狀態 - 在Cookie，URL中的散列...然後提取它的負載並相應地設置所有的值。好處是，即使關閉瀏覽器，即使將URL粘貼到朋友的瀏覽器，也可以使用URL哈希。 （好吧，也許不是支付系統：d，但你知道我的意思）

Answer 2

嘗試後。

if($("input[name='paymentmethod']:checked").length > 0){ 
    $("input[name='paymentmethod']").change(); 
} 

這意味着加載頁面後，檢查是否有選擇的選項，並觸發該事件得到你想要的行爲

Answer 3

你可能想要的是使用（之一）的jQuery history plugin （S）。這將允許瀏覽器根據散列顯示您想要的div。

但是，如果你依靠的頁面保存檢查/刷新上未選中值，這樣只會正確，如果你爲它添加代碼工作。 IE瀏覽器。並非所有瀏覽器都保持頁面刷新時的表單值，除非頁面已經明確設置。這很可能意味着通過ajax發佈數據，將信息存儲在會話中，並讓頁面在輸出時考慮這些信息。

Answer 4

Cookies是你的朋友。

http://www.quirksmode.org/js/cookies.html

--or，有一個jQuery plugin--

http://plugins.jquery.com/cookie

或者，localStorage的是你的朋友！

$(document).ready(function() { 

//...stuff 
if (localStorage['payment']) { 
    if (localStorage['payment'] === 'credit') 
     $("#divcheque").hide(); 
    else 
     $("#divcredit").hide(); 
} 
else { 
    $("#divcheque").hide(); 
    $("#divcredit").hide(); 
}  

$("input[name='paymentmethod']").change(function() { 
    if($("input[name='paymentmethod']:checked").val() == "cheque") 
    { 
     $("#divcredit").hide(); 
     $("#divcheque").show(); 
     localStorage['payment'] = 'cheque'; 
    } 
    else if($("input[name='paymentmethod']:checked").val()== "creditcard") 
    { 
     $("#divcredit").show(); 
     $("#divcheque").hide(); 
     localStorage['payment'] = 'credit'; 
    } 
}); 

http://diveintohtml5.ep.io/storage.html

對於跨瀏覽器兼容性，使用cookie。但是，從兩方面來看，即使在用戶離開一段時間之後，它仍然可以工作。你可能會或可能不想要的東西。

Answer 5

通過提取出來的方法稍微修改您的jQuery：

$(document).ready(function() { 

    //...stuff 

    ShowHidePanels(); 

    $("input[name='paymentmethod']").change(function() { 
     ShowHidePanels(); 
    }); 

    function ShowHidePanels(){ 
     if($("input[name='paymentmethod']:checked").val() == "cheque") 
     { 
      $("#divcredit").hide(); 
      $("#divcheque").show(); 
     } 
     else if($("input[name='paymentmethod']:checked").val()== "creditcard") 
     { 
      $("#divcredit").show(); 
      $("#divcheque").hide(); 
     } 
    }; 
}); 

Answer 6

哇，我慢，反正這裏是我的解決方案：
http://jsfiddle.net/FerMU/

你也有一些困惑與標籤和ID複選框。