Question

我有以下代码（html属性用于bootstrap-slider）：

<!-- Text input-->
<div class="form-group" id = "time">
    <label class="col-md-4 control-label" for="notification_time">How many minutes before an event?</label>
    <div class="col-md-6">  
    <input id="notification_time" name="notification_time" type="text" value="{{current_user.notifications_min}}" data-slider-min="5" data-slider-max="120" data-slider-step="5" data-slider-value="{{current_user.notifications_min}}" data-slider-selection="after">
    </div>
</div>


<div class="form-group">
  <label class="col-md-4 control-label" for="notifications">E-mail notification</label>
  <div class="col-md-4">
      <input name="notifications" id="emailnotification" value="emailnotification" type="checkbox" data-on="success" data-off="danger" data-on-label="Yes" data-off-label="No" {% if current_user.daily_mail %} checked {% endif%}>
    <span class="help-block">You'll get an email **X** minutes before each event</span>  
      </div>
  </div>

我希望上例中的 X 根据notification_time中的输入自动更改。我该怎么做？

Answer 1

试试这个：

$('#notification_time').on('change', function () {
    var time = $(this).val();
    $('.help-block').text('You\'ll get an email ' + time + ' minutes before each event');
});

修改：请注意change事件只会在您更改并保留输入焦点时触发。现代浏览器支持input事件，或者如果您愿意，可以尝试使用keyup。

修改2 ：阅读slider for bootstrap上的文档后，试试这个：

$('#notification_time').slider().on('slideStop', function () {
    var time = $('#notification_time').val();
    $('.help-block').text('You\'ll get an email ' + time + ' minutes before each event');
});

使用jQuery基于select输入更改帮助文本

1 个答案: