Question

我在三张幻灯片中的每张中都使用了带有表单/问题的slick.js。在滑块上方，我有一个带有“问题1”框的容器。我想要的是在显示问题2时将“问题1”更改为“问题2”，在显示问题3时将其更改为“问题3”。

我尝试设置一个.on“ afterChange”函数，当我console.log（此）确实显示正确的轮播项目时，但问题编号并未按照我的意愿动态更改

HTML: (one question....there are about five more)

$(surveySlider).on('afterChange', function(event, slick,
  currentSlide, nextSlide) {
  if ($('.survey-one').is(':visible')) {
    $('#survey-number').text('Question 1')
  }
  if ($('.survey-two').is(':visible')) {
    $('#survey-number').text('Question 2')
  }
  if ($('.survey-three').is(':visible')) {
    $('#survey-number').text('Question 3')
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- question number container -->
<div class="survey">
  <p class="survey-question-number" id="survey- 
    number">Question 1</p>
  <!-- WHAT I WANT TO CHANGE BASED ON QUESTION SHOWN
                </div>
                <!-- form -->
  <form id="form">
    <!-- slick slider / form questions -->
    <section class="survey-slider text-dark">
      <!-- inner container for survey -->
      <div class="survey-container">
        <!-- question 1 -->
        <div class="form-group survey-one">
          <p class="survey-title-question">question one</p>
          <label for="a"><input name="questionOne" type="radio" id="a" class="selection" value="A"/><span>A</span>
                                    A</label>
          <label for="b">
                                    <input name="questionOne" type="radio" id="b" class="selection" value="B"/><span>B</span>
                                    B</label>
          <label for="C">
                                    <input name="questionOne" type="radio" id="c" class="selection" value="c"/><span>C</span>
                                    C</label>
          <label for="D">
                                    <input name="questionOne" type="radio" id="D" class="selection" value="Dr"/><span>D</span>
                                   D</label>
        </div>
        <!-- end question 1 -->
      </div>
      <!-- inner container for survey end -->

根据轮播中显示的问题动态更改问题1、2、3

Answer 1

似乎afterChange事件将currentSlide作为其参数之一传递，该事件以数字作为索引的形式出现。不必对div的可见性进行多次检查，您可以将一个div作为目标并在每次幻灯片迭代中更改其文本，从而预先增加零索引值：

$(surveySlider).on('afterChange',function(event, slick, currentSlide, nextSlide) {
  $('#survey-number').text('Question ' + ++currentSlide);
});

有没有一种方法可以根据显示的轮播项目更改文本？

1 个答案: