Jquery mobile JQueryMobile滑块更改事件-显示图像

我有一个滑块

我想做的是，当滑块在10-20、21-40、41-60、61-80、81-100之间时，我想用另一个图像替换图像，您可以看到我想替换的默认图像

所以，例如，如果滑块位于21-40之间，则应将图像源更改为

<img src="images/slide_2.jpg" width="459" height="315">

---

等等。。如何操作？

很简单，如果您向滑块标记添加type属性，如so

type=“slider”

，它将成为html5滑块对象，并将有一个更改事件，您可以在其中检查其当前值。因此，您的代码应该是这样的：

    $(document).ready(function () {
        $("#slider").change(function () {
            if (slider.value > 20 && slider.value < 41)
                $("#imgMap").attr("src", "images/slide_2.jpg");
        });
    });

$（文档）.ready（函数（）{
$（“#滑块”）.change（函数（）{
如果（slider.value>20&&slider.value<41）
$（“imgMap”）.attr（“src”、“images/slide_2.jpg”）；
});
});

如果您提供您的图像id=“imgMap”

现场示例：

JS:

$（“#滑块”）.change（函数（）{
sVal=$（this.val（）；
如果（sVal>21&&sVal 41&&sVal 61&&sVal 81&&sVal感谢您的回答，根据您的建议，我尝试了它，但它不起作用..？您的标记中有语法错误。请检查javascript控制台
<img id="imgMap" src="images/slide_1.jpg" width="459" height="315">
<input type="slider" name="slider" id="slider" value="47" min="0" max="100" 
    data-type="range">

$("#slider").change(function() {
    sVal = $(this).val();

    if(sVal > 21 && sVal <= 40) {
        $('#theImage').attr('src', 'http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/21-skull.png');
    }

    if(sVal > 41 && sVal <= 60) {
        $('#theImage').attr('src', 'http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/18-envelope.png');
    }

    if(sVal > 61 && sVal <= 80) {
        $('#theImage').attr('src', 'http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/100-coffee.png');
    }

    if(sVal > 81 && sVal <= 100) {
        $('#theImage').attr('src', 'http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/88-beermug.png');
    }

});

<div data-role="page" id="slider-test" data-theme="a"> 
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="slider">Input slider: 
                <img id="theImage" src="http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/09-chat2.png" alt="slider images" />
            </label>
            <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
        </div>

    </div>
</div>