Событие смены слайдера JQueryMobile - Показать изображения - PullRequest
Новая
       6

Событие смены слайдера JQueryMobile - Показать изображения

2 голосов
/ 12 августа 2011

У меня есть ползунок, работающий здесь .

Что я хочу сделать, это когда ползунок находится между 10-20, 21-40, 41-60, 61-80, 81-100 Я хочу, чтобы изображение было заменено другим, вы можете видеть изображение по умолчанию, которое я хочу заменить ...

Так, например, если ползунок находится между 21-40, источник изображения должен быть заменен на 

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

и тд .. как это сделать?

Ответы [ 2 ]

3 голосов
/ 12 августа 2011

Live Пример:

JS: 

$("#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');
    }

});

HTML: 

<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>
0 голосов
/ 12 августа 2011

Легко, если вы добавите атрибут типа к тегу слайдера, например, type="slider", он станет объектом слайдера html5 и будет иметь событие change, где вы можете проверить его текущее значение.Таким образом, ваш код будет выглядеть примерно так: 

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

, если вы дадите свое изображение id = "imgMap" 

<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">
...