我正在使用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 docs了解我需要做什么。
输出如下:
<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.我真的不知道从哪里开始活动这些切换来做某事(在我的情况下播放视频)
答案 0 :(得分:2)
尝试使用.change()方法和.val();
$(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 +使用bind或委托,如果你有早期版本的jQuery。