0

jQuery モバイルでフォームを作成し、フォーム要素 input type="range" を使用しています。最大値が選択されると、下のスパンに「OK、この値以上」のようなメッセージが表示されます。複数の範囲をサポートする汎用関数が最も便利です。このような関数はどのように作成できますか?

<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