JQuery Range输入监听器

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (148)

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()); 
        });

似乎都没有用。难道我做错了什么?

提问于
用户回答回答于

我假设你的span有一个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);
  });
});

现在让我们假设您有一些滑块,但是如果移动了特定的滑块,您希望看到文本更改。(我假设它是因为范围输入在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);
  });
});
用户回答回答于

在HTML5时使用<input type="range">似乎没有任何问题。

扫码关注云+社区

领取腾讯云代金券