怎样使条件滑块

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结果将减去一个result = sum-1;

与同为flip_2

Answer 1

可以绑定在考虑这个标记的JQM页面

的pagecreate事件的更改事件（请注意我指定的类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