多滑块函数

Question

我创建了一个函数滑块，可以淡入和淡出下一节，但对我创建函数的方式并不满意，因为每次创建新节时都需要更改函数。

有没有办法改变这个设置，只需要一个函数，这样我就可以有100个部分，只有一个函数？不是每个部分都有100个函数来添加/删除类吗？

​

$('#toSlide-2').on('click', function (event) {
       event.preventDefault();
       $('#slide-1').removeClass('in-view').addClass('out-of-view');
       $('#slide-2').addClass('in-view');
 })
 $('#toSlide-3').on('click', function (event) {
       event.preventDefault();
       $('#slide-2').removeClass('in-view').addClass('out-of-view');
       $('#slide-3').addClass('in-view');
 })
 $('#toSlide-4').on('click', function (event) {
       event.preventDefault();
       $('#slide-3').removeClass('in-view').addClass('out-of-view');
       $('#slide-4').addClass('in-view');
 })

.out-of-view{
  opacity:0;
  }
.in-view{
  opacity:1;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view">
  <h2>form 1</h2>
  <button id="toSlide-2">button</button>
</form>

<form id="slide-2" class="out-of-view">
  <h2>form 2</h2>
    <button id="toSlide-3">button</button>
</form>

<form id="slide-3" class="out-of-view">
  <h2>form 3</h2>
    <button id="toSlide-4">button</button>
</form>

<form id="slide-4" class="out-of-view">
  <h2>form 4 - done</h2>
</form>

​

Answer 1

这是使用jQuery的工作解决方案的简化版本。

​

$('.buttons').on('click', function (event) {
       event.preventDefault();
       $(this).parent().removeClass('in-view').addClass('out-of-view');
       $(this).parent().next().addClass('in-view');
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="slide-1" class="in-view">
  <h2>form 1</h2>
  <button class="buttons">button</button>
</form>

<form id="slide-2" class="out-of-view">
  <h2>form 2</h2>
    <button class="buttons">button</button>
</form>

<form id="slide-3" class="out-of-view">
  <h2>form 3</h2>
    <button class="buttons">button</button>
</form>

​

Answer 2

您可以使用data属性来确定接下来将显示哪个元素id，如下所示：

​

function init() {
  $('.in-view').show();
  $('.out-of-view').hide();
}

function slide(slideId1, slideId2) {
  $(`#${slideId1}`).hide();
  $(`#${slideId2}`).show();
}

$('.slide-btn').on('click', function (event) {
  event.preventDefault();
  slide($(this).parent().attr("id"), $(this).data("next"));
});

init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view">
  <h2>form 1</h2>
  <button class="slide-btn" data-next="slide-2">button</button>
</form>

<form id="slide-2" class="out-of-view">
  <h2>form 2</h2>
    <button class="slide-btn" data-next="slide-3">button</button>
</form>

<form id="slide-3" class="out-of-view">
  <h2>form 3</h2>
    <button class="slide-btn" data-next="slide-4">button</button>
</form>

<form id="slide-4" class="out-of-view">
  <h2>form 4 - done</h2>
</form>

​

Answer 3

下面是一个纯JS函数，它将使用类选择器动态获取元素并迭代它们，并在事件侦听器中使用关键字this来选择下一个元素兄弟项，并添加/删除类名。

注意:我添加了一个名为forms的类，并使用它来获取要在forEach循环中使用的表单元素列表。

另外，我建议使用display: none/block而不是opacity。这将防止元素在每次选择按钮时向下推入页面。

​

// get your element list
const forms = document.querySelectorAll(".forms");

// iterate over the element list using forEach()
forms.forEach(function(v){
  // foreach value in the list, set a click event listener
  v.addEventListener('click', function(e){
    e.preventDefault();
    // now use the key word 'this' to add/remove class names
    // then target the next sibling in the list to add/remove class names
    this.classList.remove("in-view");
    this.classList.add("out-of-view");
    this.nextElementSibling.classList.remove('out-of-view');
    this.nextElementSibling.classList.add('in-view');
  })
})

.out-of-view{
  display:none;
  }
.in-view{
  display:block;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view forms">
  <h2>form 1</h2>
  <button id="toSlide-2">button</button>
</form>

<form id="slide-2" class="out-of-view forms">
  <h2>form 2</h2>
    <button id="toSlide-3">button</button>
</form>

<form id="slide-3" class="out-of-view forms">
  <h2>form 3</h2>
    <button id="toSlide-4">button</button>
</form>

<form id="slide-4" class="out-of-view forms">
  <h2>form 4 - done</h2>
</form>

​

JQuery版本：

无论HTML中有多少表单元素，只要它们有forms类，就会在函数中迭代和处理它们。

此外，使用更少的代码行，并使用.css()直接在JQuery中更改css

​

// get your element list
const $forms = $(".forms");

// iterate over the element list using.each()
$forms.each(function() {
  // use $(this) to define the element being clicked on
  $(this).click(function(e) {
    e.preventDefault();
    $(this).css('display', 'none');
    $(this).next().css('display', 'block');
  })
})

.out-of-view {
  display: none;
}

.in-view {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view forms">
  <h2>form 1</h2>
  <button id="toSlide-2">button</button>
</form>

<form id="slide-2" class="out-of-view forms">
  <h2>form 2</h2>
  <button id="toSlide-3">button</button>
</form>

<form id="slide-3" class="out-of-view forms">
  <h2>form 3</h2>
  <button id="toSlide-4">button</button>
</form>

<form id="slide-4" class="out-of-view forms">
  <h2>form 4 - done</h2>
</form>

​