使用 noUiSlider 值通过其索引更改 div 元素的 class

Question

我想在滑动范围 UI 时更改 div class。我不能

var behaviourSlider = document.getElementById('tap');

noUiSlider.create(behaviourSlider, {
  start: 2,
  step: 1,
  behaviour: 'drag',
  connect: [true, false],
  range: {
    'min': 1,
    'max': 4
  }
});

运行 https://jsfiddle.net/cnsvnc/evass2ef/

Answer 1

您可以为 start/end events 添加事件侦听器。

然后在事件侦听器回调中，您可以在 the classList property 上调用 .add()/remove() 方法，以便 add/remove 在 class 上你的 .hometab 元素：

Updated Example

var behaviourSlider = document.getElementById('tap');
var targetElement = document.querySelector('.hometab');

noUiSlider.create(behaviourSlider, {
  start: 2,
  step: 1,
  behaviour: 'drag',
  connect: [true, false],
  range: {
    'min': 1,
    'max': 6
  }
});

behaviourSlider.noUiSlider.on('start', function() {
  targetElement.classList.add('active');
});

behaviourSlider.noUiSlider.on('end', function() {
  targetElement.classList.remove('active');
});

这里有一段演示：

var behaviourSlider = document.getElementById('tap');
var targetElement = document.querySelector('.hometab');

noUiSlider.create(behaviourSlider, {
  start: 2,
  step: 1,
  behaviour: 'drag',
  connect: [true, false],
  range: {
    'min': 1,
    'max': 6
  }
});

behaviourSlider.noUiSlider.on('start', function() {
  targetElement.classList.add('active');
});

behaviourSlider.noUiSlider.on('end', function() {
  targetElement.classList.remove('active');
});

.hometab {
  display: none;
}

.active {
  display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.2.0/nouislider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.2.0/nouislider.min.css" rel="stylesheet"/>
<div id="tap"></div>

<div class="cloudhome">
  <ul class="hometab">
    <li><span>1</span> Core</li>
    <li><span>2</span> GB RAM</li>
    <li><span>20</span> GB HDD</li>
    <li><a data-balloon="Example" data-balloon-pos="up" href="#">Order Now</a></li>
  </ul>
</div>

根据您在下面的评论，如果您想根据滑块的值按索引显示相应的 ul 元素，则可以使用以下内容。

Updated Example

var behaviourSlider = document.getElementById('tap');
var targetElements = document.querySelectorAll('.hometab');

noUiSlider.create(behaviourSlider, {
  start: 0,
  step: 1,
  behaviour: 'drag',
  connect: [true, false],
  range: {
    'min': 0,
    'max': 3
  }
});

behaviourSlider.noUiSlider.on('slide', function() {
  var index = +behaviourSlider.noUiSlider.get();

  [].forEach.call(targetElements, function (element) {
    element.classList.remove('active');
  });

  targetElements[index].classList.add('active');
});

如您所见，滑块的值被检索并转换为数字。然后有一个循环隐藏所有目标 ul 元素并根据索引（滑块的值）显示所需的元素。

这里有一段演示：

var behaviourSlider = document.getElementById('tap');
var targetElements = document.querySelectorAll('.hometab');

noUiSlider.create(behaviourSlider, {
  start: 0,
  step: 1,
  behaviour: 'drag',
  connect: [true, false],
  range: {
    'min': 0,
    'max': 3
  }
});

behaviourSlider.noUiSlider.on('slide', function() {
  var index = +behaviourSlider.noUiSlider.get();
  
  [].forEach.call(targetElements, function (element) {
    element.classList.remove('active');
  });
  
  targetElements[index].classList.add('active');
});

.hometab {
  display: none;
}

.active {
  display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.2.0/nouislider.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.2.0/nouislider.min.css" rel="stylesheet"/>
    
<div id="tap"></div>

<div class="cloudhome">
  <ul class="hometab active">
    <li><span>1</span> Core</li>
    <li><span>2</span> GB RAM</li>
    <li><span>20</span> GB HDD</li>
    <li><a data-balloon="Example" data-balloon-pos="up" href="#">Order Now</a></li>
  </ul>
  <ul class="hometab">
    <li><span>2</span> Core</li>
    <li><span>4</span> GB RAM</li>
    <li><span>40</span> GB HDD</li>
    <li><a data-balloon="Example" data-balloon-pos="up" href="#">Order Now</a></li>
  </ul>
  <ul class="hometab">
    <li><span>4</span> Core</li>
    <li><span>6</span> GB RAM</li>
    <li><span>60</span> GB HDD</li>
    <li><a data-balloon="Example" data-balloon-pos="up" href="#">Order Now</a></li>
  </ul>
  <ul class="hometab">
    <li><span>8</span> Core</li>
    <li><span>100</span> GB RAM</li>
    <li><span>100</span> GB HDD</li>
    <li><a data-balloon="Example" data-balloon-pos="up" href="#">Order Now</a></li>
  </ul>


</div>

使用 noUiSlider 值通过其索引更改 div 元素的 class

Change a div element's class by its index using the noUiSlider value

html

javascript

css

jquery

nouislider