У меня есть несколько ползунков jQuery, и я пишу собственный стиль для них, в моем ползунке, если один ползунок увеличивается, другие ползунки должны уменьшаться, и я пишу собственный стиль для этих ползунков, и эти стили больше не используются.Я написал собственный стиль, например .slider_class .ui-widget-content {...} , но он принимает стиль по умолчанию .ui-widget-content {...}
drawSlider: function(elementId, sliderMax, sliderVal) {
$(".slider_class").each(function() {
$( this ).empty().slider({
range: "max",
min: 0,
max: sliderMax,
value: sliderVal,
step: 100,
slide: function(event, ui) {
// Update display to current value
$(this).siblings().text(ui.value);
var total = 0;
$(".slider_class").not(this).each(function() {
total += $(this).slider("option", "value");
});
total += ui.value;
var max = sliderMax - total;
// Update each slider
$(".slider_class").not(this).each(function() {
var t = $(this),
value = t.slider("option", "value");
t.slider("option", "max", max + value)
.siblings().text(value + '/' + (max + value));
t.slider('value', value);
});
}
});
});
// code for dynamically displaying the slider
$('#account-wrapper-holder').append('<div class="account-wrapper">' +
'<h6>' + aName[j] + ':' + aNum[j] + '</h6>' +
'<p><span id="text-tot-allocate-value' + aName[j] + aNum[j] + '">Current cash balance: $' + balanceRange[j] + '</span>' +
'<span>Total to allocate:<input type="text" id="tot-allocate-value' + aName[j] + aNum[j] + '" value="' + balanceRange[j] + '" onchange="s.setValue(parseInt(this.value))"/></span></p>' +
'<div class="slider_class" id="slider-' + aName[j] + aNum[j] + '"></div>' +
'<span class="value">0</span><span class="var-account-total-balance" style="float:right;">$0</span></div>'
);
_this.drawSlider('slider-' + aName[j] + aNum[j] + '', sumOfCurrencyBalances, balanceRange[j]);