我已经将一个带有下拉框的 jquery 滑块与当滑块或下拉框中的值发生更改时将显示 div 的功能相结合。
但是，只有当我更改下拉框中的值时，div 才可见，而不是滑块中的值。
$(function() {
$('#range-start').change(function() {
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
function checkvalue(val) {
if (val === "others") document.getElementById('color').style.display = 'block';
else document.getElementById('color').style.display = 'none';
}
$(window).load(function() {
jQuery.fn.selectToUISlider = function(settings) {
var selects = jQuery(this);
//accessible slider options
var options = jQuery.extend({
labels: 3,
//number of visible labels
tooltip: true,
//show tooltips, boolean
tooltipSrc: 'text',
//accepts 'value' as well
labelSrc: 'value',
//accepts 'value' as well ,
sliderOptions: null
}, settings);
//handle ID attrs - selects each need IDs for handles to find them
var handleIds = (function() {
var tempArr = [];
selects.each(function() {
tempArr.push('handle_' + jQuery(this).attr('id'));
});
return tempArr;
})();
//array of all option elements in select element (ignores optgroups)
var selectOptions = (function() {
var opts = [];
selects.eq(0).find('option').each(function() {
opts.push({
value: jQuery(this).attr('value'),
text: jQuery(this).text()
});
});
return opts;
})();
//array of opt groups if present
var groups = (function() {
if (selects.eq(0).find('optgroup').size() > 0) {
var groupedData = [];
selects.eq(0).find('optgroup').each(function(i) {
groupedData[i] = {};
groupedData[i].label = jQuery(this).attr('label');
groupedData[i].options = [];
jQuery(this).find('option').each(function() {
groupedData[i].options.push({
text: jQuery(this).text(),
value: jQuery(this).attr('value')
});
});
});
return groupedData;
}
else return null;
})();
//check if obj is array
function isArray(obj) {
return obj.constructor == Array;
}
//return tooltip text from option index
function ttText(optIndex) {
return (options.tooltipSrc == 'text') ? selectOptions[optIndex].text : selectOptions[optIndex].value;
}
//plugin-generated slider options (can be overridden)
var sliderOptions = {
step: 1,
min: 0,
orientation: 'horizontal',
max: selectOptions.length - 1,
range: selects.length > 1,
//multiple select elements = true
slide: function(e, ui) { //slide function
var thisHandle = jQuery(ui.handle);
//handle feedback
var textval = ttText(ui.value);
thisHandle.attr('aria-valuetext', textval).attr('aria-valuenow', ui.value).find('.ui-slider-tooltip .ttContent').text(textval);
//control original select menu
var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
currSelect.find('option').eq(ui.value).attr('selected', 'selected');
},
values: (function() {
var values = [];
selects.each(function() {
values.push(jQuery(this).get(0).selectedIndex);
});
return values;
})()
};
//slider options from settings
options.sliderOptions = (settings) ? jQuery.extend(sliderOptions, settings.sliderOptions) : sliderOptions;
//select element change event
selects.bind('change keyup click', function() {
var thisIndex = jQuery(this).get(0).selectedIndex;
var thisHandle = jQuery('#handle_' + jQuery(this).attr('id'));
var handleIndex = thisHandle.data('handleNum');
thisHandle.parents('.ui-slider:eq(0)').slider("values", handleIndex, thisIndex);
});
//create slider component div
var sliderComponent = jQuery('<div></div>');
//CREATE HANDLES
selects.each(function(i) {
var hidett = '';
//associate label for ARIA
var thisLabel = jQuery('label[for=' + jQuery(this).attr('id') + ']');
//labelled by aria doesn't seem to work on slider handle. Using title attr as backup
var labelText = (thisLabel.size() > 0) ? 'Slider control for ' + thisLabel.text() + '' : '';
var thisLabelId = thisLabel.attr('id') || thisLabel.attr('id', 'label_' + handleIds[i]).attr('id');
if (options.tooltip == false) {
hidett = ' style="display: none;"';
}
jQuery('<a ' + 'href="#" tabindex="0" ' + 'id="' + handleIds[i] + '" ' + 'class="ui-slider-handle" ' + 'role="slider" ' + 'aria-labelledby="' + thisLabelId + '" ' + 'aria-valuemin="' + options.sliderOptions.min + '" ' + 'aria-valuemax="' + options.sliderOptions.max + '" ' + 'aria-valuenow="' + options.sliderOptions.values[i] + '" ' + 'aria-valuetext="' + ttText(options.sliderOptions.values[i]) + '" ' + '><span class="screenReaderContext">' + labelText + '</span>' + '<span class="ui-slider-tooltip ui-widget-content ui-corner-all"' + hidett + '><span class="ttContent"></span>' + '<span class="ui-tooltip-pointer-down ui-widget-content"><span class="ui-tooltip-pointer-down-inner"></span></span>' + '</span></a>').data('handleNum', i).appendTo(sliderComponent);
});
//CREATE SCALE AND TICS
//write dl if there are optgroups
if (groups) {
var inc = 0;
var scale = sliderComponent.append('<dl class="ui-slider-scale ui-helper-reset" role="presentation"></dl>').find('.ui-slider-scale:eq(0)');
jQuery(groups).each(function(h) {
scale.append('<dt style="width: ' + (100 / groups.length).toFixed(2) + '%' + '; left:' + (h / (groups.length - 1) * 100).toFixed(2) + '%' + '"><span>' + this.label + '</span></dt>'); //class name becomes camelCased label
var groupOpts = this.options;
jQuery(this.options).each(function(i) {
var style = (inc == selectOptions.length - 1 || inc == 0) ? 'style="display: none;"' : '';
var labelText = (options.labelSrc == 'text') ? groupOpts[i].text : groupOpts[i].value;
scale.append('<dd style="left:' + leftVal(inc) + '"><span class="ui-slider-label">' + labelText + '</span><span class="ui-slider-tic ui-widget-content"' + style + '></span></dd>');
inc++;
});
});
}
//write ol
else {
var scale = sliderComponent.append('<ol class="ui-slider-scale ui-helper-reset" role="presentation"></ol>').find('.ui-slider-scale:eq(0)');
jQuery(selectOptions).each(function(i) {
var style = (i == selectOptions.length - 1 || i == 0) ? 'style="display: none;"' : '';
var labelText = (options.labelSrc == 'text') ? this.text : this.value;
scale.append('<li style="left:' + leftVal(i) + '"><span class="ui-slider-label">' + labelText + '</span><span class="ui-slider-tic ui-widget-content"' + style + '></span></li>');
});
}
function leftVal(i) {
return (i / (selectOptions.length - 1) * 100).toFixed(2) + '%';
}
//show and hide labels depending on labels pref
//show the last one if there are more than 1 specified
if (options.labels > 1) sliderComponent.find('.ui-slider-scale li:last span.ui-slider-label, .ui-slider-scale dd:last span.ui-slider-label').addClass('ui-slider-label-show');
//set increment
var increm = Math.max(1, Math.round(selectOptions.length / options.labels));
//show em based on inc
for (var j = 0; j < selectOptions.length; j += increm) {
if ((selectOptions.length - j) > increm) { //don't show if it's too close to the end label
sliderComponent.find('.ui-slider-scale li:eq(' + j + ') span.ui-slider-label, .ui-slider-scale dd:eq(' + j + ') span.ui-slider-label').addClass('ui-slider-label-show');
}
}
//style the dt's
sliderComponent.find('.ui-slider-scale dt').each(function(i) {
jQuery(this).css({
'left': ((100 / (groups.length)) * i).toFixed(2) + '%'
});
});
//inject and return
sliderComponent.insertAfter(jQuery(this).eq(this.length - 1)).slider(options.sliderOptions).attr('role', 'application').find('.ui-slider-label').each(function() {
jQuery(this).css('marginLeft', -jQuery(this).width() / 2);
});
//update tooltip arrow inner color
sliderComponent.find('.ui-tooltip-pointer-down-inner').each(function() {
var bWidth = jQuery('.ui-tooltip-pointer-down-inner').css('borderTopWidth');
var bColor = jQuery(this).parents('.ui-slider-tooltip').css('backgroundColor')
jQuery(this).css('border-top', bWidth + ' solid ' + bColor);
});
var values = sliderComponent.slider('values');
if (isArray(values)) {
jQuery(values).each(function(i) {
sliderComponent.find('.ui-slider-tooltip .ttContent').eq(i).text(ttText(this));
});
}
else {
sliderComponent.find('.ui-slider-tooltip .ttContent').eq(0).text(ttText(values));
}
return this;
}
$range = $('.range');
var $rangeSelect = $range.find('select');
$rangeSelect.selectToUISlider({
labels: 12,
sliderOptions: {
orientation: 'vertical'
},
slide: function(event, ui) {}
});
$range.find('.ui-slider').wrap('<div class="ui-slider-wrapper"></div>');
}); //]]>