试图在jquery中连接字符串和变量

Question

我试图在Jquery中连接并且遇到很多麻烦。每次页面加载我都希望$ sign出现在我的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').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>

任何帮助将不胜感激！

Answer 1

您可以使用css :before来显示$字符

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您将const Form = React.createClass({ getInitialState: function() { return { number: { txt: null, // the text that displays in the input box val: null // the actual number value } }; }, componentWillReceiveProps: function(nextProps) { // assume that some `parseInput` function exists to get the number value let numberVal = parseInput(nextProps.number); if (numberVal !== this.state.number.val) { this.setState({ number: { txt: numberVal, val: numberVal } }); } }, handleChange: function(newTxt) { // update number input let newNumberState = { txt: newTxt }; // assume that some `parseInput` function exists to get the number value let newVal = parseInput(newTxt); if (newVal !== this.state.number.val) { newNumberState.val = newVal; tellSomeoneThatWeHaveANewNumber(newVal); } // update state (either txt or txt & val) this.setState({ number: newNumberState }); }, render: function() { return ( <NumberInput onInputChange={this.handleChange} value={this.state.number.txt} /> ); } }); const NumberInput = React.createClass({ handleChange: function(e) { // filter out unwanted characters const newValue = e.target.value.replace(/[^\d.-]/g, ''); // send new value to parent component this.props.onInputChange(newValue); }, render: function() { let {value} = this.props; return ( <input onChange={this.handleChange} type="text" value={value || ''} /> ); } }); 设置为等于jQuery对象，该对象将被评估为字符串amount。尝试这样的事情：

[object Object]

Fiddle

您需要捕获输入的值，然后将其插入到输出容器中的keyup上。非常直截了当。

另外：如果你可以用vanilla javascript做到这一点，为什么要使用jQuery？

Answer 3

方法1：

$(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>

方法2：

$(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>