2010-11-04 132 views
0

我有一個產品選擇頁面,您可以在其中選擇一個計劃,並且一旦選擇它,就會在div中顯示選擇信息。問題是如果頁面被刷新,彙總div消失,但它會記住你的表單選擇。我怎樣才能得到它,所以它還記得總結?表格選擇處理

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 

</head> 
<body> 
<script> 
$(document).ready(function(){ 
     $("div.plan").hide(); 

     $("input[type=radio]").click(function(){ 
      $("div.plan").hide(); 
      $("div[planid=" + $(this).val() +"]").show(); 
     }); 
}); 
</script> 

<input type="radio" name="plan" value="1" /> Plan 1 <br /> 
<input type="radio" name="plan" value="2" /> Plan 2 <br /> 
<input type="radio" name="plan" value="3" /> Plan 3 <br /> 

<div class="plan" planid="1">Plan 1 details</div> 
<div class="plan" planid="2">Plan 2 details</div> 
<div class="plan" planid="3">Plan 3 details</div> 

</body> 
</html> 

回答

1

你的代碼的居留權後,可以觸發click處理所選擇的單選按鈕,這樣的:

$(document).ready(function(){ 
    $("div.plan").hide(); 

    $("input[type=radio]").click(function(){ 
     $("div.plan").hide(); 
     $("div[planid=" + $(this).val() +"]").show(); 
    }).filter(':checked').click(); 
}); 

這樣做是使用你已經綁定的處理程序,然後從那些元素獲取:checked之一併執行click事件處理程序,顯示正確的<div>

另外,planid不是一個有效的屬性,如果你正在沿着這條路繼續前進並使用data- attributes,那麼你將在HTML5中有效(它們在HTML4中不存在問題)。

+0

謝謝你完美的工作,並感謝對屬性的頭像。 – Johnny 2010-11-04 22:20:09

0

添加在頁面加載代碼:

$(document).ready(function(){ 
    $('input:radio:checked').each(function(){ 
    $('div[planid=' + $(this).val + ']').show(); 
    }); 
}); 

注意,有可能是在頁面加載閃存不被顯示的摘要。

1

您可以使用URL散列來維護狀態。

當選擇時,做這樣的事情:

document.location = document.location + "#P1" 

當頁面重新加載,請在URL中的散列和解析什麼是在另一邊。

「#P1」(1 =計劃1,2 =計劃2等)

然後相應地調整顯示器。

0

這可以用純CSS處理。

給你的單選按鈕一些類(計劃1,計劃2,計劃3等),並給你的div.plan元素一些類匹配(計劃1,計劃2,計劃3等;使用相同的類名是罰款):

.plan { 
    display: none; 
} 

.plan-1:checked ~ .plan-1, 
.plan-2:checked ~ .plan-2, 
.plan-3:checked ~ .plan-3 { 
    display: block; 
} 
當然

,這需要CSS3選擇器,JavaScript可以處理向後兼容。在CSS中使用:checked選擇器可以讓您創建純CSS切換菜單以及純CSS的手風琴效果。