Question

我正在jQuery mobile中创建一个表单并使用表单元素input type =“range”。当选择最大值时，我想要一条消息在下面的跨度中显示“好，这个值或更多”的内容。支持多个范围的通用函数将是最有用的。怎样才能做出这样的功能？

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

Answer 1

工作示例：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();
            }
        }
    });    
}

jQuery mobile，当表单元素输入类型=“范围”值为max时显示消息

1 个答案: