多个 jquery 滑块不采用样式

Question

我有一个多个 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]);

Answer 1

我假设你的标记看起来像这样，

<span class="slider_class ui-widget-content">
   ...
</span>

在这种情况下，正确的 css 选择器将是

.slider_class.ui-widget-content {... }

注意缺少空格。

如果不是这种情况，请发布您的标记。

编辑 jsFiddle