我是JQuery mobile的初学者,我需要一些帮助来完成以下计算
我有这个翻转样本
<form method="post" action="#" >
<label for="flip_1">option1 :</label>
<select name="flip_1" id="flip_1" data-role="slider" onchange="OnChange(this)">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<label for="flip_2">option2 :</label>
<select name="flip_2" id="flip_2" data-role="slider" onchange="OnChange(this)">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
<div align="center"> <p id="demo">Result</p> </div>
和这个java
<script type="text/javascript" language="javascript">
function OnChange(node) {
if ($("#flip_1").val() == "on") {
sum=sum+1;
alert('flip_1_on');
} else if ($("#flip_1").val() == "off") {
sum=sum-1;
alert('flip_1_off');
}
if ($("#flip_2").val() == "on") {
sum=sum+1;
} else if ($("#flip_2").val() == "off") {
sum=sum-1;
}
document.getElementById("demo").innerHTML = sum;
}
</script>
我所需要的只是当我滑动flip_1时,结果将是和+ 1,当我再次滑动flip_1时,结果将减去一个结果= sum-1;
和flip_2相同
答案 0 :(得分:0)
您可以在jQM页面的pagecreate事件中绑定change事件
鉴于此标记(注意我将类myFilp分配给两个开关并删除了内联脚本):
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<form method="post" action="#">
<label for="flip_1">option1 :</label>
<select name="flip_1" id="flip_1" class="myFlip" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<label for="flip_2">option2 :</label>
<select name="flip_2" id="flip_2" class="myFlip" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
<div align="center">
<p id="demo">Result</p>
</div>
</div>
</div>
脚本:
$(document).on("pagecreate", "#page1", function () {
var sum = 0;
$(".myFlip").on("change", function () {
var newval = $(this).val();
if (newval == "on") {
sum++;
} else {
sum--;
}
$("#demo").text("Result = " + sum);
});
});
这是一个有效的 DEMO