Question

我有很多Bootstrap模态，这些模态取决于单击的按钮。其中之一是显示值的计算器。我希望第一次单击计算器按钮以清除输入（计算器的显示屏幕）。我试图使用.one（），但是在模式关闭后，计算器有可能再次打开以显示新的总计。我如何才能仅在第一次单击时清除显示，但是该事件可以在模式关闭后重新设置，从而保留了仅在第一次单击时清除屏幕的逻辑？

// Determines button clicked via id
function myFunction(id) {
  document.calc.result.value += id;
}

// Clears calculator input screen
function clearScreen() {
  document.calc.result.value = "";
}

// Calculates input values
function calculate() {
  try {
    var input = eval(document.calc.result.value);
    document.calc.result.value = input;
    if ($('#calcValue').val() === 'I') {
      $('#itemQTY').val(input);
    } else if ($('#calcValue').val() === 'C') {
      $('#cashEntered').val(input);

    }

    $('#calculatorModal').modal('hide');
    clearScreen();
  } catch (err) {
    document.calc.result.value = "Error";
  }
  if ($('#calcValue').val() === 'CC') {
    $('#creditCardModal').modal({
      backdrop: 'static',
      keyboard: false
    });
  }
  if ($('#calcValue').val() === 'C') {
    checkIfCashBack(input);
  }
  if ($('#calcValue').val() === 'SC') {
    $('#starCardModal').modal({
      backdrop: 'static',
      keyboard: false
    });
  }
  if ($('#calcValue').val() === 'P1' || $('#calcValue').val() === 'P2' || $('#calcValue').val() === 'P3' || $('#calcValue').val() === 'P4' || $('#calcValue').val() === 'P5') {
    $('#discountValue').val(input);
    var discountType = $('#discountType').val();
    if (discountType === 'P1') {
      $('#discountReasonCodeText').html('Price Override Reason Code');
      $('#discountReasonSubFolder').html('Price discount (9)');
    } else if (discountType === 'P2') {
      $('#discountReasonCodeText').html('Dollar Item Discount Reason Code');
      $('#discountReasonSubFolder').html('Dollar discount (9)');
    } else if (discountType === 'P3') {
      $('#discountReasonCodeText').html('Percent Item Discount Reason Code');
      $('#discountReasonSubFolder').html('Percent discount (9)');
    }
    $('#discountReasonModal').modal({
      backdrop: 'static',
      keyboard: false
    });
  }
  if ($('#calcValue').val() === 'PO') {
    $('#paidOutConfirmModal').modal({
      backdrop: 'static',
      keyboard: false
    });
  }
}

<!-- calculator modal -->
<div class="modal fade" id="calculatorModal" tabindex="-1" role="dialog" aria-labelledby="calculatorModalLabel">
  <div class="modal-dialog" role="document" style="width:20%">
    <div class="">
      <div class="modal-header row">
        <div class="col-xs-12">
          <div class="col-xs-2" id="calcGlyph">

          </div>
          <div class="col-xs-10">
            <h4 class="modal-title" id="exampleModalLabel" style="padding-top: 4px;padding-left: 10px;"><span id="calcTag"></span></h4>
          </div>
        </div>
      </div>
      <div class="modal-body row">
        <div class="container text-center" id="calc">
          <div class="col-md-3" style="margin-left:13px;">
            <div class="row" id="result">
              <form name="calc">
                <span class="glyphicon glyphicon-remove calcRemove" data-dismiss="modal" aria-label="Close"></span>
                <input type="text" class="screen text-center" name="result" readonly>
                <span class="glyphicon glyphicon-ok calcOK" onclick="calculate();"></span>
              </form>
            </div>
            <div class="row dontShowCC">
              <button id="allClear" type="button" class="btn btn-danger buttonCalc" style="padding-left:7px;" onclick="clearScreen()">Clear</button>
              <button id="/" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">/</button>
              <button id="*" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">*</button>
              <button id="-" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">-</button>
            </div>
            <div class="col-xs-8" style="padding:0;margin-left:11px;">
              <div class="row dontShowCC">
                <button id="7" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">7</button>
                <button id="8" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)" style="margin-left:5px;">8</button>
                <button id="9" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">9</button>
              </div>
              <div class="row dontShowCC">
                <button id="4" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">4</button>
                <button id="5" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">5</button>
                <button id="6" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">6</button>
              </div>
              <div class="row dontShowCC">
                <button id="1" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">1</button>
                <button id="2" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">2</button>
                <button id="3" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">3</button>
              </div>
              <div class="row dontShowCC" style="margin-left:-75px;">
                <button id="0" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)" style="margin-left:66px;width:112px;">0</button>
                <button id="." type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">.</button>
              </div>
            </div>
            <div class="col-xs-2 dontShowCC">
              <button id="+" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)" style="height:112px;margin-left:1px;">+</button>
              <button id="equals" type="button" class="btn btn-success buttonCalc" style="padding-left:7px;margin-left:1px;height:108px" onclick="calculate()">Enter</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

尝试在第一次单击时简单地删除事件处理程序

$(document).on('click', 'button', function(){
    $('input[name="result"]').val('')
    $(document).off('click', 'button')
})

您还可以像这样绑定Bootstrap事件

$('#myModal').on('shown.bs.modal', function () {
    ...
})

打开模式，首先单击清除输入

1 个答案: