Вопрос по 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   ответов
0

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

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

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

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

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
12

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

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

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

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