JQM ラジオ ボタンを使用して 2 つのビュー (すべてとフィルター処理されたリスト) を切り替えようとしています。changed
ビューを切り替えるスクリプトをイベントに添付しようとしています。新しいページが読み込まれると、適切なラジオ ボタンが強調表示され、現在のビューが反映されます。
以下の例では、一見不規則な動作をしています (もちろん、これは決定論的ですが、動作を理解していません)。2 つの点を除いて同一の 2 つのページがあります。
checked
2 つのページでは、要素が設定されたラジオ ボタンが異なります。- 2 つのページでは、本文の内容 (ラジオ ボタンの下) が異なります。
以下のページが読み込まれると、All Trips
適切に強調表示されます。ボタンをクリックするMy Trips
と、ページが変わります。もう一方のラジオ ボタンが強調表示され、本文が変わります。しかしAll Trips
、2 ページ目のボタンをクリックすると、本文が変更され、ラジオ ボタンが一時的に変更されますが、その後状態に戻りMy Trips
ます。
2 ページ目から開始すると、同様の動作が発生します。
<div data-role="page" data-cache="never" id="mainpage">
<div data-role="content">
<fieldset data-role="controlgroup" data-type="horizontal" class="trippick">
<input type="radio" name="radio-choice" id="radio-choice-all-trips" value="all" checked="checked" />
<label for="radio-choice-all-trips">All Trips</label>
<input type="radio" name="radio-choice" id="radio-choice-my-trips" value="mine" />
<label for="radio-choice-my-trips">My Trips</label>
</fieldset>
<script type="text/javascript">
$(":radio[name='radio-choice']").change(function () {
var selection=$(this).val();
if (selection == "mine") {
$.mobile.changePage("opt2.html");
} else {
$.mobile.changePage("opt1.html");
}
});
</script>
<p>[All trips shown here.]</p>
</div>
</div>