0

jqueryでトグルスイッチを作成していますが、このトグルで何かをトリガーする方法がわかりません。だから私はこれを持っています：

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain">
<?php
for($i=0;$i<$num_cameras;$i++)
{
?>

<select name="<?php echo "toggleswitch".$i; ?>" id="<?php echo "toggleswitch".$i; ?>" data-theme="" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>
<label for="<?php echo "toggleswitch".$i; ?>">
<?php echo $cameras[$i]["camera_name"]; ?> 
</label>
<?php
}
?>                              

</div>
</div>
</div>  

<?php
}
}
?>
</body>

サーバーからカメラのリストを取得しているので、それが事態を複雑にするかどうかはわかりません。私がやりたいのは、誰かが「オン」へのトグルをクリックしたときにビデオの再生を開始することです。フリップトグルスイッチのjqueryドキュメントから何をする必要があるのか​​わかりません。

出力は次のようになります。

<select name="toggleswitch0" id="toggleswitch0" data-theme="" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<label for="toggleswitch0">Default camera</label>

                                               <select name="toggleswitch1" id="toggleswitch1" data-theme="" data-role="slider">
<option value="off">Off </option>
<option value="on">On</option>
</select>
<label for="toggleswitch1">test</label>

基本的に、見つけたカメラの数（この場合は2）に基づいて、いくつかのトグルスイッチを作成します。ここからどこに移動してこれらのトグルをアクティブにして何かを実行するか（私の場合はビデオを再生する）が本当にわかりません。

4

1 に答える 1

2

.val（）と一緒に.change（）メソッドを使用してみてください。

$(document).on('pageinit',function(){
    $('#toggleswitch0').change(function(){ // shortcut for .bind('change')
        if($(this).val() == 'on'){
            $('video')[0].play();
        } else {
            $('video')[0].pause();
        }
    });        
});​​​​​

これが例ですhttp://jsfiddle.net/codaniel/STLvS/1/

注： .on（）は、jQuery 1.7でのみ機能します。以前のバージョンのjQueryを使用している場合は、代わりにバインドまたはデリゲートを使用してください。

于 2012-05-04T04:56:47.720 に答える