javascript - 使用JS/jQuery返回原文

Question

我有一些 jQuery，当输入一个值时，它会从 Price Range 更改为该值。当用户删除该值时，我需要它默认返回到价格范围。我尝试过 else if 语句，但我的 JS/jQuery 根本不好，而且不起作用。不知道从这里去哪里。

jQuery:

function modPrice() {
  if ($("#listing-price-selector") && $("#listing-price-selector").next()) {
    var mn = $("#listing-price-selector").next().find("#listing_search_form_min_price").val();
    var mx = $("#listing-price-selector").next().find("#listing_search_form_max_price").val();
    if (mn || mx) {
      mn = (mn == "") ? 0 : mn;
      mx = (mx == "") ? 0 : mx;
      $("#priceBox").val(mn + " to " + mx);
      if (parseFloat($("#listing_search_form_max_price").val()) > 0) {
        $("#listing-price-selector").text(" $" + mn + " to $" + mx);
      } else {
        $("#listing-price-selector").text(" $" + mn);
      }
    }
  }
}

HTML:

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

Answer 1

您可能需要动态更改它的是监听器。以下是有关如何使用一些文档执行此操作的步骤。

1. 在最小/最大输入字段上添加 change 监听器，该监听器将在编辑值时更改页面上的listing-price-selector。 https://api.jquery.com/change/
2. 使用默认价格将 html 数据属性添加到 listing-price-selector。当输入字段的值丢失时，通过选择将文本更改为数据值来显示默认定价。 https://api.jquery.com/data/