javascript - 使用 noUiSlider 值按其索引更改 div 元素的类

Question

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

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() 方法为了在您的 .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>

---

根据您在下面的评论，如果您想根据 slider 的值通过其索引显示相应的 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');
});

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

这是一个演示这一点的片段:

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>