更改按钮文本 - JS，回报率

Question

我有一个Price Range按钮，点击后打开一个酥料饼的时候。在那个popover中，有两个输入框。 A Min Rent框和Max Rent框。一旦在该框中输入值，我想Price Range框现在显示先前输入的值。类似于$2000 to $2500。我查看过Google和其他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); 
} 

在那里你可以做更多的处理，比如确保max超过min，或者你喜欢的任何东西。

希望这会有所帮助！

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>