2016-12-05 3 views
0

У меня есть jQuery, что при вводе значения будет изменяться с Price Range на то, что это значение. Когда это значение удаляется пользователем, мне нужно вернуть его по умолчанию до Price Range. Я пробовал заявление else if, но мой JS/jQuery не очень хорош, и это не работает. Не уверен, куда идти отсюда.Вернуться к первому тексту используя 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> 
+0

Примечание: 'jQuery()' возвращает объект; 'if ($ (" # listing-price-selector ") && $ (" # listing-price-selector "). next())' может возвращать 'true', даже если элементы не существуют. – guest271314

ответ

1

То, что вы, вероятно, нужно изменить его динамически является слушателем. Ниже приведены шаги, как это сделать с некоторой документацией.

  1. Добавить change слушателя мин/макс полей ввода, которые изменят listing-price-selector на странице, если значения редактируются. https://api.jquery.com/change/
  2. Добавьте атрибут данных html в listing-price-selector по цене по умолчанию. Когда значения полей ввода отсутствуют, покажите цену по умолчанию, выбрав изменение текста в значение данных. https://api.jquery.com/data/
Смежные вопросы