javascript - 获取范围 slider 输入的宽度

Question

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

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

范围 slider 最终将如下所示:

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();