1

我是 jQuery mobile 的初学者，我正在尝试制作一个简单的功能，通过使用一个滑块作为区域、今天用于 glastype 的单选按钮组和一种名为 moniflex 的材料来代替 glas 来帮助人们进行能量计算并将导致节能。

我遇到的问题是： - onclick 事件在 safari mac/iPhone 上不起作用。- 我得到不同的值，但做出了相同的选择。

编码：

   <script type="text/javascript">


    function displayVals() {

      var area = $("#slider1").val();
      var glas = $("input[name='Ftyp']:checked").val();
      var moniflex = $("input[name='Mflex']:checked").val();
      var summary = parseFloat(area * (glas - moniflex) * 107.28);
      $("#Resultat").html(parseInt(summary) + " kWh");

    }

   </script> 

    <div data-role="page" class="gridContainer clearfix">
    <div id="LayoutDiv1">
    <div data-role="header" id="Header"><img src="img/top.jpg"></div>
    <div data-role="content" id="Content">
    <div data-role="fieldcontain">
    <div id="Resultat" class="Sum">0 kWh</div>
    <div id="Yta">
    <label for="slider">Value:</label>
    <input type="range" name="slider1" id="slider1" value="0" min="0" max="1000" step="1" onChange="displayVals();" data-highlight="true" />

      </div>
      <div id="Glas">
        <div data-role="fieldcontain">
          <fieldset data-role="controlgroup" data-type="horizontal" onClick="displayVals();" >
            <legend>Option</legend>
            <input type="radio" name="Ftyp" id="Ftyp_0" value="5.5" />
            <label for="Ftyp_0">Enkelglas</label>
            <input type="radio" name="Ftyp" id="Ftyp_1" value="3" />
            <label for="Ftyp_1">Dubbelglas</label>
          </fieldset>
        </div>

      </div>
      <div id="Material">
      <div data-role="fieldcontain">
          <fieldset data-role="controlgroup" data-type="horizontal" onClick="displayVals();" >
            <legend>MONIFLEX</legend>
            <input type="radio" name="Mflex" id="Mflex_0" value="3" />
            <label for="Mflex_0">10mm</label>
            <input type="radio" name="Mflex" id="Mflex_1" value="1.9" />
            <label for="Mflex_1">20mm</label>
            <input type="radio" name="Mflex" id="Mflex_2" value="1.4" />
            <label for="Mflex_2">30mm</label>
          </fieldset>
          </div>

    </div>  
      </div>




    </div>
  </div>
</div>
</body>
</html>
4

1 回答 1

1

我发现了你的问题。单击控制组是不够的，因为您将在实际选择单选框之前尝试查找单选值。您将需要创建一个轻微的超时。

这是一个工作示例：http: //jsfiddle.net/Gajotres/yRbUT/

$(document).on('pagebeforeshow', '#test-page', function(){       
    $(document).on('click', '[data-role="controlgroup"]', function(){       
        setTimeout(function () { displayVals(); }, 100);
    });
    $( "#slider1" ).on('slidestop', function(event, ui) {
      displayVals();
    });    
});

function displayVals() {
    var area = $("#slider1").val();
    var glas = $("input[name='Ftyp']:checked").val();
    var moniflex = $("input[name='Mflex']:checked").val();
    var summary = parseFloat(area * (glas - moniflex) * 107.28);
    $("#Resultat").html(parseInt(summary) + " kWh");
    alert(area + ' - ' + glas + ' - ' +  moniflex);    
}

此外，如果可能，不要将 onclick 与 jQuery Mobile 一起使用。而是自己绑定事件，就像我的例子一样。

于 2013-02-07T09:45:50.457 回答