Question

我是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相同

Answer 1

您可以在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

如何为滑块制作条件

1 个答案: