问JQuery参考错误(特定于Safari)
EN

Stack Overflow用户

提问于 2015-09-16 02:15:18

回答 1查看 194关注 0票数 1

我的代码似乎在Chrome/IE/Firefox上工作，但是当涉及到Safari时，我会得到一个错误(参见下面)。我正在使用Safari 8.0.8。

我试图将选中后的select选项的值相加，并创建一个总计。随着航向的变化，总数将发生变化。我知道，在创建global var并尝试使用safari访问它时，似乎是这样的，但我似乎无法让它工作起来。

该解决方案还必须在移动平台上工作，因为它是为移动设备而构建的，但也不适用于iPhone。我正在使用JQuery和JQuery Mobile。

还有别的办法可以绕开吗？我可以简化JQuery (将有30种选择，我需要这个smaller和更多的efficient)吗？

误差

ReferenceError: Can't find variable: previous

片段

$('#select-choice-timely').on('click', function () {
    previous = this.value;
}).change(function () {
    var a = $('#fr-total').html();
    var ab = parseInt(a, 10) - parseInt(previous, 10);
    var b = $(this).val();
    var c = parseInt(ab, 10) + parseInt(b, 10);
    $('#fr-total').html(c);
});

<html class=""><head><meta charset="UTF-8"><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/JamieSterling/pen/QjyxGz">

<link rel="stylesheet prefetch" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<style class="cp-pen-styles"></style></head><body>
<div data-role="page" id="page-site-data">
  <div data-role="panel" data-display="push" id="mypanel" data-theme="b">
    <div class="user">
      <h3>Dave Smith</h3>
      <p><a href="/" class="">Logout</a></p>
    </div>
    <ul id="menu-panel" class="ui-listview ui-listview-b" data-role="listview">
      <li class=""><a href="/home.html" class="ui-link ui-btn ui-btn-icon-left ui-icon-home">Home</a></li>
      <li class=""><a href="#page-2" class="ui-link ui-btn">High performance finance</a></li>
      <li class=""><a href="#page-3" class="ui-link ui-btn">Peer review</a></li>
      <li class=""><a href="#page-4" class="ui-link ui-btn">Tools</a></li>
      <li class=""><a href="#page-5" class="ui-link ui-btn">Diary</a></li>
      <li class=""><a href="#page-6" class="ui-link ui-btn">Blog</a></li>
    </ul>
  </div>
  <!-- /panel -->
  <div data-role="header">
    <h1>Business Unit</h1>
    <a href="/site-1.html" class="ui-btn-left ui-btn-icon-notext ui-icon-hotback" data-role="none" data-icon="hotback" data-iconpos="left" role="button">Back</a>
  </div>
  <!-- /header -->
  <div role="main" class="ui-content">
    <h2>Add Performance Data</h2>
    <form id="add-data-1">
      <fieldset data-role="collapsible" data-iconpos="right" data-collapsed="false" id="fr">
        <legend>Financial Reporting</legend>
        <div class="ui-field-contain" id="timely-report">
          <label for="select-choice-timely" class="select">Timely Report</label>
          <select name="select-choice-timely" id="select-choice-timely" data-mini="true" data-inline="true">
          
            <option value="1">Basic</option>
          
            <option value="2">Developed</option>
          
            <option value="3">Advanced</option>
          
            <option value="4">High Performance</option>
          
            <option value="5">World Class</option>
          </select>
        </div>

        <div class="ui-field-contain">
          <label for="select-choice-accurate" class="select">Accurate Reporting</label>
          <select name="select-choice-accurate" id="select-choice-accurate" data-mini="true" data-inline="true">
          
            <option value="1">Basic</option>
          
            <option value="2">Developed</option>
          
            <option value="3">Advanced</option>
          
            <option value="4">High Performance</option>
          
            <option value="5">World Class</option>
          </select>
        </div>

        <div class="ui-field-contain">
          <label for="select-choice-efficient" class="select">Efficient Processes</label>
          <select name="select-choice-efficient" id="select-choice-efficient" data-mini="true" data-inline="true">
          
            <option value="1">Basic</option>
          
            <option value="2">Developed</option>
          
            <option value="3">Advanced</option>
          
            <option value="4">High Performance</option>
          
            <option value="5">World Class</option>
          </select>
        </div>

        <div class="ui-field-contain">
          <label for="select-choice-harmonised" class="select">Harmonised &amp; Flexible</label>
          <select name="select-choice-harmonised" id="select-choice-harmonised" data-mini="true" data-inline="true">
          
            <option value="1">Basic</option>
          
            <option value="2">Developed</option>
          
            <option value="3">Advanced</option>
          
            <option value="4">High Performance</option>
          
            <option value="5">World Class</option>
          </select>
        </div>

        <div class="ui-field-contain">
          <label for="select-choice-measured" class="select">Measured &amp; Monitored Performance</label>
          <select name="select-choice-measured" id="select-choice-measured" data-mini="true" data-inline="true">
          
            <option value="1">Basic</option>
          
            <option value="2">Developed</option>
          
            <option value="3">Advanced</option>
          
            <option value="4">High Performance</option>
          
            <option value="5">World Class</option>
          </select>
        </div>
        <div class="ui-field-contain">
          <label for="select-choice-fr-total">Total</label>
          <div id="fr-total">5</div>
        </div>
      </fieldset>

      <button type="submit" id="submit-1" class="ui-shadow ui-btn ui-corner-all">Submit Data</button>

    </form>
  </div>
  <!-- /content -->
</div>
<!-- /page -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body></html>

Link

科德芬

javascript

jquery

jquery-mobile

safari

企业复产复工专享

为企业提供海量产品优惠，助力中小企业数字化转型升级

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-16 02:40:04

在Safari中，change在click之前触发，因此previous在change-callback中是未定义的。

另一种方法：

$("#select-choice-timely").change(function() {

  var a = $("#fr-total").html();
  var ab = parseInt(a, 10) - parseInt($(this).prop('previous'), 10);
  var b = $(this).val();
  var c = parseInt(ab, 10) + parseInt(b, 10);

  $("#fr-total").html(c);
  $(this).prop('previous',this.value)
}).prop('previous',function(){return this.value});