获取范围滑块输入的宽度

Question

我希望在 js 函数 addMarks 中获取类 iris-bar 的宽度。然后，获取此值将允许我根据线的宽度更改沿我的范围滑块线放置的标记的颜色。

• 我希望更改使用“如果小于或等于”语句的颜色。
• 我在一页上有多个范围滑块，因此需要获取各个范围滑块的行值并将其应用于滑块。
• 线的类名是“iris-line”。
• 使用 console.log 定义 var line = $(".iris-bar").width(); 输出“未定义”。

范围滑块最终将如下所示：

HTML

<div class="range-slider">
    <span class="irs irs--round js-irs-0">
      <span class="irs">

        <span class="irs-line" tabindex="0"></span>

        <span class="irs-min" style="visibility: visible;">0</span>
        <span class="irs-max" style="visibility: visible;">4</span>
        <span class="irs-from" style="visibility: hidden;">0</span>
        <span class="irs-to" style="visibility: hidden;">0</span>
        <span class="irs-single" style="left: 48.7239%;">2</span>

      </span>

      <span class="irs-grid"></span>
      <span class="irs-bar irs-bar--single" style="left: 0px; width: 50%;"></span>
      <span class="irs-shadow shadow-single" style="display: none;"></span>

      <span class="mark" style="background-color: #005190; left: 0%;"></span>
      <span class="mark" style="background-color: #005190; left: 25%;"></span>
      <span class="mark" style="background-color: #005190; left: 50%;"></span>
      <span class="mark" style="background-color: #CCDCE9; left: 75%;"></span>
      <span class="mark" style="background-color: #CCDCE9; left: 100%;"></span>

     </span>

    <input type="text" class="js-range-slider irs-hidden-input" value="" tabindex="-1" readonly="">
</div>

Javascript

var $range = $(".js-range-slider");
var min = 0;
var max = 4;
var marks = [0, 1, 2, 3, 4];


$range.ionRangeSlider({
    skin: "round",
    grid: false,
    min: min,
    max: max,
    step: 1,
    from: 2,
    onStart: function (data) {
        addMarks(data.slider);
    }
});

function convertToPercent (num) {
    var percent = (num - min) / (max - min) * 100;    
    return percent;
}

function addMarks ($slider) {
    var html = '';
    var left = 0;

    // need to define the width of iris-bar here
    var line = ;

    var i;    
    for (i = 0; i < marks.length; i++) {
        left = convertToPercent(marks[i]);

        if (left <= line) {
            color = '#005190';
        } else {
            color = '#CCDCE9';
        }
        html += '<span class="mark" style="background-color: '+ color +'; left: ' + left + '%; -webkit-transform: translate(-' + left + '%, 0); -moz-transform: translate(-' + left + '%, 0); -ms-transform: translate(-' + left + '%, 0); -o-transform: translate(-' + left + '%, 0); -transform: translate(-' + left + '%, 0);"></span>';
    }

    $slider.append(html);
}

Answer 1

如果您需要元素的宽度，并且由于您使用的是 jQuery，您可以简单地使用 $("element").width()。

var MyWidth = $(".iris-bar").width();