Question

使用以下脚本单击切换按钮时，我正在尝试更新应用程序中的设置：

$(function() {
  $(".radio-switch").on('click', '#switch-units', function() {
    // $("input").prop('disabled', true);
    var currUnits = $("input[name='units']:checked").val();
    var units;
    alert(currUnits);

    if (currUnits === 'km') {
      $("input[id='km']").attr('checked', false);
      $("input[id='miles']").attr('checked', true);
      units = 'miles';
    } else if (currUnits === 'miles') {
      $("input[id='miles']").attr('checked', false);
      $("input[id='km']").attr('checked', true);
      units = 'km';
    }

    alert(units);
    var data = {
      username: '{{ username }}',
      units: units
    };
    alert(data.username);

    $.ajax({
      url: '/api/settings/units',
      type: 'POST',
      dataType: 'json',
      data: data,
      success: function(data) {
        // $("input").prop('disabled', false);
        if (data.status === 'saved') {
          // alert("units updated ! ");
        }
        if (data.status === 'invalid') {
          alert(data.message);
        }
      }
    });
  });
});

对于前两次单击，脚本将正确执行，并且我的所有警报都将返回您期望的结果。但是，在第三次单击时，currUnits和units变量都警报为undefined。

我无法弄清楚问题是什么，我希望有人可以指出正确的方向。预先感谢。

HTML模板：

<span class="title">Units</span>
<div class="radio-switch">
  <input type="radio" name="units" value="km" id="km" class="active-left" {% if settings is not null and settings.units=="KM" %}checked="checked" {% endif %}>
  <input type="radio" name="units" value="miles" id="miles" {% if settings is null or settings.units=="MILES" %}checked="checked" {% endif %}>
  <label for="km">Km</label>
  <span id="switch-units" class="virtual-switch"></span>
  <label for="miles">Miles</label>
</div>
</span>

Answer 1

对于设置为选中（或未选中）的集合，请使用以下语法：

  $("input[id='km']").prop('checked', true/*or false*/);

或

  $("input[id='km']")[0].checked=true/*or false*/;

jQuery脚本，仅可切换两次

1 个答案: