Question

目前当页面加载defualt值10显示时，我想这样：

自定义金额显示：

但如果我在自定义区域中键入内容然后将其删除，则不会显示默认值。如下所示：

即使用户删除了自定义金额，如何才能显示10。我基本上希望10总是显示用户是否输入金额或点击另一个按钮

这是我的js：

$(document).ready(function() {
      $('#donation-amount').keyup(function() {
      $('#display-amount').text($(this).val());
      });
     $( ".selectvalue" ).click(function() {
        $('#display-amount').text($(this).val());
     });

    $(".buttons .btn").click(function(){
        $(".buttons .btn").removeClass('active');
        $(this).toggleClass('active'); 
    });
    $('#display-amount').text($('#default').val());

});

和我的HTML：

  <div class="choose-pricing">
          <div class="btn-group">
          <div class="buttons">
            <button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="10">10</button>
            <button type="button" class="btn btn-default selectvalue hover-color" value="15">15</button>
            <button type="button" class="btn btn-default selectvalue hover-color" value="20">20</button>
            <input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
            </div>
            <input type="hidden" name="donation-amount-value" id="donation-amount-value">
          </div>
          <div class="money-donate">
            <div class="display-amount" id="display-amount">
            </div>
          </div>
        </div>

任何帮助将不胜感激！

Answer 1

你可以这样做

将默认值存储在全局中，然后在值为空时应用。

var defaultValue = 10;

$('#donation-amount').keyup(function() {
    if($(this).val()) {
         $('#display-amount').text($(this).val());
    } else {
        $('#display-amount').text(defaultValue );
    }
});

在此处查看http://jsbin.com/guxukodace/edit?html,js,output

获取默认值以显示在div

1 个答案: