在jQuery中尝试连接字符串和变量

Question

我正在尝试在Jquery中进行连接，但遇到了很多麻烦。每次页面加载时，我希望$符号出现在我的div中。我能够在Javascript中做到这一点，但在Jquery中似乎无法实现。

这是我的js：

$(document).ready(function(){

    $('#donation-amount').keyup(function() {
         var amount = $('#display-amount').text($(this).val());
    });
})

我尝试了这个： $('.display-amount').append("<span>" + '$' + amount + "</span>"); 它会给我这样的结果：

我还尝试过创建一个 span 标签，并为其添加了一个类名为 dollar，然后尝试了这两个方法。

 $('#dollar').val('$' + amount);
    $('#dollar').val($('$').val() + amount);

这是我的表单。

 <div class="row">
    <div class="form-group">
      <fieldset>
        <legend class="text-center">How much would you like to donate</legend>
        <div class="choose-pricing">
          <div class="btn-group">
            <button type="button" class="btn btn-default selectvalue active">10</button>
            <button type="button" class="btn btn-default selectvalue">15</button>
            <button type="button" class="btn btn-default selectvalue">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">
            <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>
      </fieldset>
    </div>
  </div>

任何帮助都将不胜感激！

- avasssso

Answer 1

您正在将amount设置为一个jQuery对象，它被评估为一个字符串[object Object]。尝试使用以下代码：

var input = $("#input");
var output = $("#output");

input.keyup(function() {

    var amount = input.val();
    output.text('$' + amount);
});

Fiddle

您需要在键盘松开时捕获输入值，然后将其插入到输出容器中。非常简单。

另外：如果您可以使用原生JavaScript完成此操作，为什么要使用jQuery？

- Bosworth99

Answer 2

您可以使用css的:before伪元素来展示美元符号$。

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

#display-amount:before {
  content: "$";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="row">
  <div class="form-group">
    <fieldset>
      <legend class="text-center">How much would you like to donate</legend>
      <div class="choose-pricing">
        <div class="btn-group">
          <button type="button" class="btn btn-default selectvalue active">10</button>
          <button type="button" class="btn btn-default selectvalue">15</button>
          <button type="button" class="btn btn-default selectvalue">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">
          <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>
    </fieldset>
  </div>
</div>

- guest271314

---

非常感谢！正是我所需要的！ - avasssso

Answer 3

方法一：

$(document).ready(function(){
    $('#donation-amount').keyup(function() {
         var amount = $('#display-amount').text('$' + $(this).val());
    });
})

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="row">
    <div class="form-group">
        <fieldset>
            <legend class="text-center">How much would you like to donate</legend>
            <div class="choose-pricing">
                <div class="btn-group">
                    <button type="button" class="btn btn-default selectvalue active">10</button>
                    <button type="button" class="btn btn-default selectvalue">15</button>
                    <button type="button" class="btn btn-default selectvalue">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">
                    <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>
        </fieldset>
    </div>
</div>

方法二：

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

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="row">
    <div class="form-group">
        <fieldset>
            <legend class="text-center">How much would you like to donate</legend>
            <div class="choose-pricing">
                <div class="btn-group">
                    <button type="button" class="btn btn-default selectvalue active">10</button>
                    <button type="button" class="btn btn-default selectvalue">15</button>
                    <button type="button" class="btn btn-default selectvalue">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">
                    <input type="hidden" name="donation-amount-value" id="donation-amount-value">
                </div>
                <div class="money-donate">
                    <div class="display-amount">$<span id="display-amount"></span></div>
                </div>
            </div>
        </fieldset>
    </div>
</div>

- John Slegers