时间戳

首页 > 解决方案 > 105 个字母后 JQuery 崩溃

javascript - 105 个字母后 JQuery 崩溃

问题描述

这对我来说很奇怪。我目前正在使用 js/jquery 创建一个多项选择测验，我发现如果我输入一个长度超过 105 个字符的问题，脚本就不会运行并且无法单击任何按钮。

例如，使用我提供的代码，这将运行得非常好，并且我可以进行多项选择测验。但是，将问题更改为超过 105 个字符的其他问题会破坏它。

例如，如果我改变了

“多项选择q1”

至

“进程‘PopularScreenSavers.exe’正在用户笔记本电脑的后台运行。这可能是一个例子吗？”（我想包括的一个问题）

基本上完全停止了我的脚本运行。

下面包含的是当前的 js 以及相关 html 正文的片段。一切都很好......除非我想要一个更长的问题。

任何帮助，将不胜感激。

代码

(function() {
  const myQuestions = [
    {
      question: "The process ‘PopularScreenSavers.exe’ is running in the background of a user's laptop. What could this be an example of? ",
      answers:
      {
        a: "a",
        b: "b",
        c: "c",
        d: "d"
      },
      correctAnswer: "a"
    },
    {
    question: "Multiple choice q1",
    answers:
    {
      a: "",
      b: "",
      c: "",
      d: ""
    }
  
}];

  function buildQuiz()
  {
    const output = [];
    myQuestions.forEach((currentQuestion, questionNumber) =>
    {
      const answers = [];
      for (letter in currentQuestion.answers)
      {
        answers.push(`<label>
           <input type="radio" name="question${questionNumber}" value="${letter}">
            ${letter} :
            ${currentQuestion.answers[letter]}
         </label>`);
      }
      output.push(`<div class="slide">
         <div class="question"> ${currentQuestion.question} </div>
         <div class="answers"> ${answers.join("")} </div>
       </div>`);
    });
    quizContainer.innerHTML = output.join("");
  }

  function showResults()
  {
    const answerContainers = quizContainer.querySelectorAll(".answers");
    let numCorrect = 0;
    myQuestions.forEach((currentQuestion, questionNumber) =>
    {
      const answerContainer = answerContainers[questionNumber];
      const selector = `input[name=question${questionNumber}]:checked`;
      const userAnswer = (answerContainer.querySelector(selector) ||
      {}).value;
      if (userAnswer === currentQuestion.correctAnswer)
      {
        numCorrect++;
        answerContainers[questionNumber].style.color = "#009A44";
        answerContainers[questionNumber].style.fontWeight = "900";
      }
      else
      {
        answerContainers[questionNumber].style.color = "#DA291C";
        answerContainers[questionNumber].style.fontWeight = "900";
      }
    });
    resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;
  }

  function showSlide(n)
  {
    slides[currentSlide].classList.remove("active-slide");
    slides[n].classList.add("active-slide");
    currentSlide = n;
    if (currentSlide === 0)
    {
      previousButton.style.display = "none";
    }
    else
    {
      previousButton.style.display = "inline-block";
    }
    if (currentSlide === slides.length - 1)
    {
      nextButton.style.display = "none";
      submitButton.style.display = "inline-block";
    }
    else
    {
      nextButton.style.display = "inline-block";
      submitButton.style.display = "none";
    }
  }

  function showNextSlide()
  {
    showSlide(currentSlide + 1);
  }

  function showPreviousSlide()
  {
    showSlide(currentSlide - 1);
  }
  const quizContainer = document.getElementById("quiz");
  const resultsContainer = document.getElementById("results");
  const submitButton = document.getElementById("submit");
  buildQuiz();
  const previousButton = document.getElementById("previous");
  const nextButton = document.getElementById("next");
  const slides = document.querySelectorAll(".slide");
  let currentSlide = 0;
  showSlide(0);
  submitButton.addEventListener("click", showResults);
  previousButton.addEventListener("click", showPreviousSlide);
  nextButton.addEventListener("click", showNextSlide);
})();
<head>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="quiz-container">
  <div id="quiz"></div>
</div>
<button id="previous">Previous Question</button>
<button id="next">Next Question</button>
<button id="submit">Submit Quiz</button>
<div id="results"></div>

编辑：添加它作为有效的 js 运行，但它不在 Chrome 中运行 - 应该已经指定，道歉。

jsfiddle

这些小提琴应该显示我遇到的问题：

工作 - https://jsfiddle.net/3m5afcuo/

不起作用（仅对字符串进行了更改） - https://jsfiddle.net/su3hptdq/

标签： javascriptjqueryhtml

解决方案

推荐阅读