更改文本输入上的按钮文本- JS, RoR

Changing Button Text on Text Input - JS, RoR

本文关键字：文本 JS 按钮 RoR 输入      更新时间：2023-09-26

我有一个Price Range按钮，当点击将打开一个弹出窗口。在弹出窗口中，有两个输入框。一个Min Rent盒和一个Max Rent盒。一旦在该框中输入了值，我希望Price Range框现在显示先前输入的值。比如$2000 to $2500。我看了又看了谷歌和其他StackOverflow的问题和答案，但我不确定如何做到这一点。任何帮助将非常感激!

Erb文件:

<div class="col-md-2 col-xs-6">
  <a tabindex="0" class="button btn-transparent" id="listing-price-selector" role="button" data-toggle="popover">Price Range <span class="caret"></span></a>
</div>
<div id="listing-price-content" style="display: none;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6">
        <div class="input-group input-group-sm">
          <span class="input-group-addon" id="basic-addon1">$</span>
          <%= f.text_field :min_price, class: "form-control", placeholder: "Min Rent", data: { "binding-name" => "min-price" } %>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="input-group input-group-sm">
          <span class="input-group-addon" id="basic-addon1">$</span>
          <%= f.text_field :max_price, class: "form-control", placeholder: "Max Rent", data: { "binding-name" => "max-price" } %>
        </div>
      </div>
    </div>
  </div>
</div>

JS文件:

$('#listing-price-selector').popover( {
  html: true,
  trigger: 'manual',
  placement: 'bottom',
  template:  '<div class="popover price-range-pop" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
  content: function() {
    return $('#listing-price-content').html();
  }
});

我认为您需要的是在弹出窗口内的任何一个输入上触发一个更改事件(keyup)的函数。

这里的棘手之处在于，至少对我来说，弹出窗口的内容是动态生成的，所以试图在页面加载时为这些元素分配事件处理程序是行不通的。

真正起作用的是在这些元素生成后分配事件处理程序。

有一些事件是为弹出窗口本身触发的，你可以为它们分配一个处理程序，这将使你得到你需要的。

$("[data-toggle='popover']").on('shown.bs.popover', function(){
  $("#listing-price-selector").next().find("#min-price").keyup(modPrice);
  $("#listing-price-selector").next().find("#max-price").keyup(modPrice);
});

和modPrice可以是一个函数来固定价格范围框的值。比如:

function modPrice(){
  var mn = $("#listing-price-selector").next().find("#min-price").val();
  var mx = $("#listing-price-selector").next().find("#max-price").val();
  mn = (mn == "") ? 0 : mn;
  mx = (mx == "") ? 0 : mx;
  $("#listing-price-selector").text(mn + " to " + mx);
}

在这里你可以做更多的处理，比如确保max大于min，或者任何你喜欢的。

希望这对你有帮助!

PS -从W3Schools ref page: http://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp获得弹出窗口事件

PPS -为了好玩，我做了一个片段示例，如下:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-2 col-xs-6">
  <a tabindex="0" class="button btn-transparent" id="listing-price-selector" role="button" data-toggle="popover">Price Range <span class="caret"></span></a>
</div>
<div class="input-group input-group-sm">
  <span class="input-group-addon" id="basic-addon1">$</span>
  <input type="text" id="priceBox" />
</div>
<div id="listing-price-content" style="display: none;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <div class="input-group input-group-sm">
          <label>Min</label>
          <span class="input-group-addon" id="basic-addon1">$</span>
          <input type="text" id="min-price" />
        </div>
      </div>
      <div class="col-xs-12">
        <div class="input-group input-group-sm">
          <label>Max</label>
          <span class="input-group-addon" id="basic-addon1">$</span>
          <input type="text" id="max-price" />
        </div>
      </div>
    </div>
  </div>
</div>
<script>
$('#listing-price-selector').popover( {
  html: true,
  trigger: 'click',
  placement: 'bottom',
  template:  '<div class="popover price-range-pop" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
  content: function() {
    return $('#listing-price-content').html();
}
  
});
$("[data-toggle='popover']").on('shown.bs.popover', function(){
  $("#listing-price-selector").next().find("#min-price").keyup(modPrice);
  $("#listing-price-selector").next().find("#max-price").keyup(modPrice);
});
$("[data-toggle='popover']").on('hide.bs.popover', function(){
  modPrice();
});
function modPrice(){
  var mn = $("#listing-price-selector").next().find("#min-price").val();
  var mx = $("#listing-price-selector").next().find("#max-price").val();
  mn = (mn == "") ? 0 : mn;
  mx = (mx == "") ? 0 : mx;
  $("#priceBox").val(mn + " to " + mx);
  $("#listing-price-selector").text(mn + " to " + mx);
}
</script>

相关文章：