Pytanie w sprawie html5, range, javascript, jquery – JQuery Range Input Listener

19

Hej, masz małe problemy z jquery i zasięgiem hmtl5. Próbuję uzyskać wartości w miarę ich zmiany, ale detektor zdarzeń go nie przechwytuje. Obecnie mój kod to:

HTML

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

A JS to:

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

Próbowałem też

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

Żadne z nich nie działa. czy robię coś źle?

Czy moduł obsługi zdarzeń został dodany po wprowadzeniu zakresu do DOM? Andreas

Twoja odpowiedź

5   odpowiedzi
1

Wydarzenie o zmianie wydaje się działać poprawnie dla mnie:http://jsfiddle.net/zV3xD/7/

<code><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);
});​
</code>

Albo możesz spróbować czegoś takiegoto:

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

Używającoutput przykład tutaj:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

Cześć @ CarolineSchnapp - zaktualizowałem mój przykład, aby pokazać inny sposób podejścia do tego problemu. Jeśli to nie wystarczy, daj nam znać, a my możemy dowiedzieć się czegoś, co będzie. Chase
Aktualizuje tylko #newValue, gdy zwolnię przycisk suwaka na kluczu. W Google Chrome w wersji 34.0.1847.116 za pomocą jQuery 2.0.3. Caroline Schnapp
12

<input type="range"> za pomocąchange.

Widzieć:http://jsfiddle.net/DerekL/BaEar/33/

@ CarolineSchnapp - Naprawiono. Derek 朕會功夫
może nie być duży, ale uruchamia się także po najechaniu suwakiem za pomocą myszy. inaczej świetne rozwiązanie! Willi Mentzel
przynajmniej w Chrome dołączanie obsługi do zdarzenia „wejściowego” jest uruchamiane nawet po najechaniu kursorem. w przypadku „zmiany” tak nie jest. więc zdecydowałem się na „zmianę”, ponieważ zawisanie nie jest uważane za dane wejściowe w moim przypadku. efekt unoszenia może być problematyczny, jeśli Twój program obsługi wywoła manipulację domem lub wywołania ajax. Luke W
Aktualizuje tylko wartość zakresu, gdy puszczę przycisk suwaka na kluczu. W Google Chrome w wersji 34.0.1847.116 za pomocą jQuery 2.0.3. Caroline Schnapp
22
<code>$('input[type=range]').on('input', function () {
    $(this).trigger('change');
});
</code>

change wydarzenie na każdyminput zdarzenie.

0

Naprawiono kilka testów i błędów!

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

});
</code>
4

Zakładam, że twój zakres ma id:<span id="slidernumber">...</span> Załóżmy również, że masz kilka suwaków i chcesz zmienić tekst, jeśli którykolwiek z nich został przeniesiony:

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

Spróbuj tego:

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

http://jsfiddle.net/MahshidZeinaly/CgQ5c/

Załóżmy teraz, że masz kilka suwaków, ale chcesz zobaczyć zmianę tekstu, jeśli któryś z nich został przeniesiony. (Zakładam, że wejście zakresu znajduje się wewnątrz znacznika li, a ty nadałeś mu nazwę):

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

Spróbuj tego:

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

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

Powiązane pytania