0

我在 jQuery mobile 中创建一个表单并使用表单元素输入 type="range"。When max value is picked I want a message to show something like "Ok, this value or more" in a span underneath. 支持多个范围的通用函数将是最有用的。怎样才能实现这样的功能？

<label>Highest price?
    <input type="range" name="highest_price" id="highest_price" data-highlight="true" step="500" value="38000" min="2000" max="40000" size="29"/>
</label>

这是我放在一起的一个选项，它是一个函数，适用于表单中的多个范围字段。可以通过 $(document).on('slidestop' 等进行改进。

<label>Highest price?
    <input type="range" name="highest_price" id="highest_price" data-highlight="true" step="500" value="38000" min="2000" max="40000" size="29"/>
</label>
<label>When?
    <input type="range" name="withindays" id="withindays" data-highlight="true" step="1" value="5" min="1" max="20" size="29"/>
</label>

<script>
//Gives msg when value is max in range
function nyakilian_range_max_msg (thisinput){
    thisinputspan = thisinput+'_span';
    thisinput = '#' + thisinput;
    maxvalue = jQuery(thisinput).attr('max');
    slider_value = jQuery(thisinput).val();
    if(slider_value == maxvalue){   
        jQuery('#'+thisinputspan).fadeIn();
        jQuery('#form_search_txrn_milage_span').fadeIn();
    } else {  
        jQuery('#'+thisinputspan).hide();
    }
}
function nyakilian_range_max_msg_init(thisinput, mess) {
    jQuery('#'+ thisinput).parent().change( function() {
        nyakilian_range_max_msg(thisinput);
    });
    jQuery('#'+ thisinput).after('<span id="' + thisinput + '_span" style="display: none;">'+mess+'</span>');
}

nyakilian_range_max_msg_init('highest_price', 'Alright that\'s max! ');
nyakilian_range_max_msg_init('withindays', 'Alright before that or later! ');

</script>
4

1 回答 1

2

工作示例：http: //jsfiddle.net/Gajotres/an7Ax/

$(document).on('pagebeforeshow', '#index', function(){ 
    nyakilian_range_max_msg_init('#highest_price', 'Alright that\'s max! ');
    nyakilian_range_max_msg_init('#withindays', 'Alright before that or later! ');     
});

function nyakilian_range_max_msg_init(thisinput, msg) {
    $(document).on('slidestop', thisinput, function(){ 
        if($(this).val() == $(thisinput).attr('max')) {
            $(this).parent().after('<span class="slider-msg">'+ msg +'</span>');
            $(this).parent().parent().find('.slider-msg').fadeIn();
        } else {
            if($(this).parent().parent().find('.slider-msg').length > 0 ) {
                $(this).parent().parent().find('.slider-msg').fadeOut().remove();
            }
        }
    });    
}
于 2013-05-20T11:10:27.490 回答