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

Question

我有一个价格范围按钮，单击该按钮将打开一个弹出窗口。在该弹出窗口中，有两个输入框。一个最低租金框和一个最高租金框。在该框中输入值后，我希望“价格范围”框现在显示之前输入的值。类似于 2000 美元到 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();
  }
});

Answer 1

我认为您需要的是从弹出窗口内任一输入上的更改事件(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);
}

在那里你可以做更多的处理，比如确保最大值超过最小值，或者任何你喜欢的。

希望这有帮助!

PS - 从 W3Schools 引用页面获取弹出窗口事件: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>