使用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');
});

以下是一个演示此内容的片段：

＆＃13;

＆＃13;

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');
});

＆＃13;

.hometab {
  display: none;
}

.active {
  display: block
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

根据您在下方的评论，如果您希望根据滑块的值按其索引显示相应的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元素，并根据索引（滑块的值）显示所需的元素。

以下是一个演示此内容的片段：

＆＃13;

＆＃13;

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');
});

＆＃13;

.hometab {
  display: none;
}

.active {
  display: block
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;