blocks|key|362813|text|on+change事件似乎对我来说工作正常：http://jsfiddle.net/zV3xD/7/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|362814|<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-block|syntax|javascript|362815|或者你可以尝试像this这样的东西|362816|<form+oninput="result.value=parseInt(a.value)">
++++<input+type="range"+name="a"+value="50"+/>+=
++++<output+name="result">0</output>
</form>|362817|在这里使用output示例：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output|style|CODE|362818|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/zV3xD/7/|1|http://jsfiddle.net/VwTu2/|2|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output^0|M|S|0|0|0|8|4|1|0|0|5|6|E|1S|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|K|3|L|5|F|7|1B|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|1C|8|@$A|1D|B|1E|O|P]]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|Q|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

<p>The on change event seems to be working correctly for me: <a href="http://jsfiddle.net/zV3xD/7/" rel="nofollow">http://jsfiddle.net/zV3xD/7/</a></p>

<pre><code>&lt;input type="range"  min="0" max="100" name="discount_credits" id="discount_credits" /&gt;

&lt;span id="newValue" value="0"&gt;0&lt;/span&gt;

$('#discount_credits').change( function() {
    var newValue = this.value;        
    $('#newValue').html(newValue);
});​
</code></pre>

<p>Or you can try something like <a href="http://jsfiddle.net/VwTu2/" rel="nofollow">this</a>:</p>

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

<p>Using the <code>output</code> example here: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output</a></p>


blocks|key|578506|text|在使用change的HTML5+<input+type="range">上似乎没有任何问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|578507|请参阅：http://jsfiddle.net/DerekL/BaEar/33/|578508|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/DerekL/BaEar/33/^0|3|6|G|K|0|4|10|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>Does not seem to have any problem on HTML5 <code>&lt;input type="range"&gt;</code> using <code>change</code>.</p>

<p>See: <a href="http://jsfiddle.net/DerekL/BaEar/33/">http://jsfiddle.net/DerekL/BaEar/33/</a></p>


blocks|key|578552|text|我假设您的跨度有一个id：<span+id="slidernumber">...</span>还假设您有一些滑块，并且您希望在移动其中任何一个滑块时看到文本更改：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|578553|<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-block|syntax|javascript|578554|试试这个：|578555|$(document).ready(function(){
++$("[type=range]").change(function(){
++++var+newval=$(this).val();
++++$("#slidernumber").text(newval);
++});
});|578556|http://jsfiddle.net/MahshidZeinaly/CgQ5c/|578557|现在让我们假设您有几个滑块，但是您希望看到如果其中一个特定的滑块被移动，文本会发生变化。(我假定它是这样的，因为range输入在li标记中，并且您给它起了一个名字)：|578558|<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>|578559|578560|$(document).ready(function(){
++$("[type=range]").change(function(){
++++var+newv=$(this).val();
++++$(this).next().text(newv);
++});
});|578561|http://jsfiddle.net/MahshidZeinaly/2pe7P/1/|578562|entityMap|0|LINK|mutability|MUTABLE|url|1^0|D|Y|0|0|0|0|0|15|0|0|0|0|0|0|0|17|1|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1B|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|Q|3|R|5|6|7|1H|8|@]|D|@]|E|$]]|$1|S|3|T|5|H|7|1I|8|@]|D|@]|E|$I|J]]|$1|U|3|L|5|6|7|1J|8|@]|D|@]|E|$]]|$1|V|3|W|5|H|7|1K|8|@]|D|@]|E|$I|J]]|$1|X|3|Y|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|Z|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|P]]|16|$5|12|13|14|E|$15|Y]]]]

<p>I assume your span has an id: <code>&lt;span id="slidernumber"&gt;...&lt;/span&gt;</code>
Lets also assume that you have a few sliders, and you want to see a text change if any of them were moved:</p>

<pre><code>&lt;li&gt;
Apply Credits1: 
&lt;input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/&gt;
&lt;/li&gt;

&lt;li&gt;
Apply Credits2: 
&lt;input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/&gt;
&lt;/li&gt;

&lt;span id="slidernumber"&gt;50&lt;/span&gt;
</code></pre>

<p>Try this:</p>

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

<p><a href="http://jsfiddle.net/MahshidZeinaly/CgQ5c/" rel="noreferrer">http://jsfiddle.net/MahshidZeinaly/CgQ5c/</a></p>

<p>Now lets assume that you have a few sliders, but you want to see a text change if a particular one of them were moved. (I assume it because the range input is inside li tag, and you gave it a name):</p>

<pre><code>&lt;li&gt;
Apply Credits1: 
&lt;input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/&gt;
&lt;span id="slidernumber"&gt;50&lt;/span&gt;
&lt;/li&gt;

&lt;li&gt;
Apply Credits2: 
&lt;input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/&gt;
&lt;span id="slidernumber"&gt;50&lt;/span&gt;
&lt;/li&gt;
</code></pre>

<p>Try this:</p>

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

<p><a href="http://jsfiddle.net/MahshidZeinaly/2pe7P/1/" rel="noreferrer">http://jsfiddle.net/MahshidZeinaly/2pe7P/1/</a></p>


blocks|key|362903|text|$('input[type=range]').on('input',+function+()+{
++++$(this).trigger('change');
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|362904|这将在每个input事件上触发change事件。|unstyled|offset|length|style|CODE|362905|entityMap^0|0|5|5|F|6|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]|$G|Q|H|R|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|S|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>$('input[type=range]').on('input', function () {
    $(this).trigger('change');
});
</code></pre>

<p>This fires the <code>change</code> event on every <code>input</code> event.</p>


blocks|key|362937|text|几个测试和错误修复！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|362938|$('input[name=form_range]').change('mousestop',function+()+{

});|code-block|syntax|javascript|362939|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Several test and bug fixed!</p>

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

});
</code></pre>


<p>Hey having a little trouble jquery and the hmtl5 range. I'm try to get the values as they changed but the event listener is not capturing it. Currently my code is:</p>

<p>HTML</p>

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

<p>And the JS is:</p>

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

<p>I've also tried</p>

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

<p>Neither seem to work. Am I doing something wrong?</p>


JQuery Range Input Listener

HTML5

嘿，在jquery和hmtl5范围上有点小麻烦。我正在尝试获取更改后的值，但事件侦听器没有捕获到它。目前我的代码是：HTMLhtml += '<li>Apply Credits: <input type="range"  min="0" max="'+credits+'" name="discount_credits"...

问JQuery范围输入侦听器
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery范围输入侦听器EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery范围输入侦听器
EN