7

javascriptを使用してZurbFoundationSwitchコントロールの状態を動的に切り替えたいと思います。

これはデフォルトのZurbFondationSwitchです。

<!-- Default switch --> 
<div class="switch">   
  <input id="d" name="switch-d" type="radio" checked>   
  <label for="d" onclick="">Off</label>

  <input id="d1" name="switch-d" type="radio">
  <label for="d1" onclick="">On</label>

  <span></span>
</div>

ここでデモ。彼らはこのプロジェクトに基づいていると私は信じています。

jqueryを使用してスイッチの状態を変更しようとしたとき：

$('#d1').attr('checked','checked'); $('#d').removeAttr('checked'); // Switch ON
$('#d').attr('checked','checked'); $('#d1').removeAttr('checked'); // Switch OFF

Firefoxでは機能しましたが、Chromeでは機能しませんでした。Chrome [v25 on OSX10.8.3]では、最初のコマンド（Switch ON）は成功しますが、使用しようとすると$('#d').attr('checked','checked'); $('#d1').removeAttr('checked');、CSSが要素を正しく認識していないように見え、表示が不安定になります-最後の方法を確認してください下の画像のスイッチは、OFF状態を正しく表示していません。

ここに画像の説明を入力してください

これらのコマンドは、ZurbFoundationのドキュメントの[スイッチ]ページでテストできます。dページ上部のリストに表示される4番目で最大のスイッチを指します。

4

2 に答える 2

5

要素のクリック関数を直接呼び出すことができます。

$("#d1").click(); // Switch ON

問題は、要素のIDが変更されるため、少し注意が必要になることです。よりスマートなセレクターを使用して要素にアクセスできます。要素の状態が変更されると、IDが次のように変更されたことに注意してください。

$("#d").click(); // Switch OFF

これで、オフ状態に戻ります。

乾杯オリバー。

于 2013-03-25T14:28:34.873 に答える
3

または、クリックのシミュレーションに不安がある場合は、代わりにjQueryの#propを使用できます。

$('input:not([checked])').prop('checked', true);
$('input[checked]').prop('checked', false);

考えられる使用例：クリック時に発生したAJAX呼び出しのエラーハンドラー内。

于 2013-07-08T16:16:04.233 に答える