Вопрос по javascript, jquery, html5 – JQuery Range Input Listener

19

Эй, у меня небольшие проблемы с jquery и диапазоном hmtl5. Я пытаюсь получить значения по мере их изменения, но прослушиватель событий не захватывает их. В настоящее время мой код:

HTML

<code>html += '<li>Apply Credits: <input type="range"  min="0" max="'+credits+'" name="discount_credits" id="discount_credits" /> <span>'+credits+'</span></li>'
</code>

И JS это:

<code>$('#discount_credits').mousewheel( function() { 
        alert('it changed!'); 
        alert('new value = ' + $(this).val()); 
    });
</code>

Я также пытался

<code>$('#discount_credits').change( function() { 
            alert('it changed!'); 
            alert('new value = ' + $(this).val()); 
        });
</code>

Ни один, кажется, не работает. Я делаю что-то неправильно?

Добавлен ли обработчик событий после ввода диапазона в DOM? Andreas

Ваш Ответ

5   ответов
22
$('input[type=range]').on('input', function () {
    $(this).trigger('change');
});

change событие на каждомinput мероприятие

12

<input type="range"> с помощьюchange.

Видеть:http: //jsfiddle.net/DerekL/BaEar/33

Это только обновляет значение диапазона, когда я отпускаю кнопку ползунка при включении. В Google Chrome версии 34.0.1847.116 используется jQuery 2.0.3. Caroline Schnapp
@ CarolineSchnapp - Исправлено. Derek 朕會功夫
может не иметь большого значения, но это также срабатывает при наведении курсора на мышь. иначе отличное решение! Willi Mentzel
in Chrome, по крайней мере, привязка обработчика к событию 'input' срабатывает даже при наведении курсора. для события «изменение» это не так. поэтому я выбрал «изменение», так как зависание в моем случае не считается входным. эффект зависания может быть проблематичным, если ваш обработчик вызывает манипуляцию dom или вызовы ajax. Luke W
4

Я предполагаю, что у вашего диапазона есть идентификатор:<span id="slidernumber">...</span> Предположим также, что у вас есть несколько ползунков, и вы хотите увидеть изменение текста, если какой-либо из них был перемещен:

<li>
Apply Credits1: 
<input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/>
</li>

<li>
Apply Credits2: 
<input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/>
</li>

<span id="slidernumber">50</span>

Попробуй это

$(document).ready(function(){
  $("[type=range]").change(function(){
    var newval=$(this).val();
    $("#slidernumber").text(newval);
  });
});

http: //jsfiddle.net/MahshidZeinaly/CgQ5c

Теперь давайте предположим, что у вас есть несколько ползунков, но вы хотите увидеть изменение текста, если конкретный из них был перемещен. (Я предполагаю, потому что ввод диапазона находится внутри тега li, и вы дали ему имя):

<li>
Apply Credits1: 
<input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/>
<span id="slidernumber">50</span>
</li>

<li>
Apply Credits2: 
<input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/>
<span id="slidernumber">50</span>
</li>

Попробуй это

$(document).ready(function(){
  $("[type=range]").change(function(){
    var newv=$(this).val();
    $(this).next().text(newv);
  });
});

http: //jsfiddle.net/MahshidZeinaly/2pe7P/1

1

Мне кажется, что событие при изменении работает правильно:http: //jsfiddle.net/zV3xD/7

<input type="range"  min="0" max="100" name="discount_credits" id="discount_credits" />

<span id="newValue" value="0">0</span>

$('#discount_credits').change( function() {
    var newValue = this.value;        
    $('#newValue').html(newValue);
});​

Или ты можешь попробовать что-то вродеэт:

<form oninput="result.value=parseInt(a.value)">
    <input type="range" name="a" value="50" /> =
    <output name="result">0</output>
</form>

Используяoutput пример здесь:https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/outpu

Он обновляет только #newValue, когда я отпускаю кнопку ползунка при включении. В Google Chrome версии 34.0.1847.116 используется jQuery 2.0.3. Caroline Schnapp
Hi @CarolineSchnapp - я обновил свой пример, чтобы показать другой способ решения этой проблемы. Если этого недостаточно, пожалуйста, дайте мне знать, и мы сможем выяснить, что будет. Chase
0

Несколько тестов и исправлена ошибка!

$('input[name=form_range]').change('mousestop',function () {

});

Похожие вопросы