javascript - 单击“返回”最终不会显示文本（HTML、JS、CSS）

Question

我正在尝试制作一个表格，您可以使用多张幻灯片而不是滚动来回答

目前，当我单击“下一步”（在 JS 中，它调用next()）时，它会转换到下一张幻灯片，没问题

但是，如果我尝试返回（单击“返回”调用back()），则会显示标题，但不会显示幻灯片的描述。但是如果我单击“下一步”，文本会重新出现在下一张幻灯片中

这是我的代码：

    var qTitle = document.getElementById('questionTitle');
    var qDesc = document.getElementById('questionDescription');
    var qEntry = document.getElementById('answer');
    var nextButton = document.getElementById('nextButton')
    var backButton = document.getElementById('backButton')
    var entry = 1
    var questions = ["Slide 1 title", "Slide 2 title", "Slide 3 title"];
    var descriptions = ["Slide 1 content", "Slide 2 Description", "Slide 3 stuff"]
    var answerHTMLElements = ['', '<input type="checkbox">']
    var answers = []
    function next() {
      if (entry != questions.length) {
        qTitle.classList.add("fadeOut");
        qDesc.classList.add("fadeOut");
        setTimeout(function() {
          entry = entry + 1;
          qTitle.innerHTML = questions[entry - 1];
          qDesc.innerHTML = descriptions[entry - 1];
          backButton.classList.remove('disabled');
          console.log(entry)
           if (entry == questions.length) {
            nextButton.innerHTML = "Done"
          }
          qTitle.classList.remove("fadeOut");
          qTitle.classList.add("fadeIn")
          qDesc.classList.remove("fadeOut");
          qDesc.classList.add("fadeIn");
    }, 1000);
    }; };
    function back() {
      if (entry != 1) {
        qTitle.classList.add("fadeOut");
        qDesc.classList.add("fadeOut");
        setTimeout(function() {
          entry = entry - 1;
          qTitle.innerHTML = questions[entry - 1];
          qDesc.innerHTML = descriptions[entry-1];
          console.log()
          nextButton.innerHTML = "Next"
          nextButton.classList.remove('disabled');
          if (entry == 1) {
            backButton.classList.add('disabled')
          }
          qTitle.classList.remove("fadeOut");
          qTitle.classList.add("fadeIn");
      }, 1000);
    }; };

我怎样才能使“返回”按钮显示幻灯片的描述作为标题？（顺便说一句，控制台中没有错误）

标签： javascripthtmlcss

Answer 1

我看不到您的 HTML CSS，但我相信您可能需要添加以下几行：

qDesc.classList.remove("fadeOut");
qDesc.classList.add("fadeIn");