web-dev-qa-db-ja.com

JQuery範囲入力リスナー

ちょっとjqueryとhmtl5の範囲に問題があります。値が変更されたときに値を取得しようとしていますが、イベントリスナーはそれをキャプチャしていません。現在、私のコードは次のとおりです。

HTML

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

JSは次のとおりです。

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

私も試しました

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

どちらも機能していないようです。私は何か間違っていますか？

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

これにより、changeイベントごとにinputイベントが発生します。

28
Brian

HTML5では問題ないようです<input type="range">changeを使用します。

参照： http://jsfiddle.net/DerekL/BaEar/33/

14
Derek 朕會功夫

スパンにidがあると仮定します：<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/

4
Mahshid Zeinaly

On changeイベントは私にとっては正しく動作しているようです： 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);
});​

または、 this ：のようなものを試すことができます

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

1
Chase

いくつかのテストとバグが修正されました！

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

});
0
Naelson Gonçalves Saraiva