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>