在 Svelte 中的各种元素上更改多个类

Question

我有一个基本的测验应用程序，用户选择一个答案后，他们按下 'check' 按钮，如果选择的答案正确，它会突出显示为绿色，而其他答案会突出显示为红色。 Likewise when the wrong answer is selected, the selected answer is red while the correct answer is highlighted green.

目前，如果正确，我的代码会将所有答案显示为绿色，如果不正确，则将所有答案显示为红色。那么怎样才能达到上述的效果呢？

<script>
  let questionIndex = 0
  let selectedAnswer
  let correct
  let incorrect

  const quiz = [
    {
      question: 'What is the capital of France?',
      correct_answer: 'Paris',
      answers: ['Berlin', 'London', 'Madrid', 'Paris'],
    }
  ]

  const currentQuestion = quiz[questionIndex]
  const correctAnswer = currentQuestion.correct_answer

  const checkAnswer = () => {

    if (selectedAnswer  == correctAnswer) {
      correct = true
    }
        else {
            incorrect = true
        }

    }

</script>

<style>

  .correct {
    background-color: aquamarine;
  }

  .incorrect {
    background-color: red;
  }

</style>

<main>
  <h3>{quiz[questionIndex].question}</h3>

    <label class:correct class:incorrect>
                <input
                type="radio"
                bind:group={selectedAnswer}
                value={quiz[questionIndex].answers[0]} />
            {quiz[questionIndex].answers[0]}
        </label>
    
    <label class:correct class:incorrect>
                <input
                type="radio"
                bind:group={selectedAnswer}
                value={quiz[questionIndex].answers[1]} />
            {quiz[questionIndex].answers[1]}
      </label>

    <label class:correct class:incorrect>
                <input
                type="radio"
                bind:group={selectedAnswer}
                value={quiz[questionIndex].answers[2]} />
            {quiz[questionIndex].answers[2]}
      </label>

    <label class:correct class:incorrect>
                <input
                type="radio"
                bind:group={selectedAnswer}
                value={quiz[questionIndex].answers[3]} />
            {quiz[questionIndex].answers[3]}
      </label>

  <button on:click={checkAnswer}>Check</button>

</main>

Answer 1

你的逻辑是重复的，所以让它成为一个循环以节省一些工作。

现在，对于每个项目，我们想要的是：

class correct 如果按钮被点击，并且该项目是正确答案
class incorrect 如果已单击按钮并且 (a) 答案正确但该项目不是正确答案，或 (b) 答案是不正确且该项目不是所选答案

这转换为 correct class 的以下条件：

answered && value === correctAnswer

而对于不正确的 class，出现以下毛茸茸的情况（但是，老实说，我认为您的要求有点奇怪，这增加了解决方案的复杂性）：

answered && (
  (correct && value !== correctAnswer) 
  || (!correct && value === selectedAnswer)
)

所以，翻译成代码，这给了我们这样的东西：

<script>
  const questionIndex = 0

  let selectedAnswer
  let answered = false

  const quiz = [
    {
      question: 'What is the capital of France?',
      correct_answer: 'Paris',
      answers: ['Berlin', 'London', 'Madrid', 'Paris'],
    },
  ]

  // make this reactive!
  $: currentQuestion = quiz[questionIndex]
  $: correctAnswer = currentQuestion.correct_answer

  $: correct = selectedAnswer === correctAnswer

  const checkAnswer = () => {
    answered = true
  }

  const reset = () => {
    answered = false
  }
</script>

<main>
  <h3>{quiz[questionIndex].question}</h3>

  {#each quiz[questionIndex].answers as value}
    <label
      class:correct={answered && value === correctAnswer}
      class:incorrect={answered && ((correct && value !== correctAnswer) || (!correct && value === selectedAnswer))}>
      <input type="radio" bind:group={selectedAnswer} {value} />
      {value}
    </label>
  {/each}

  <button on:click={checkAnswer}>Check</button>
  <button on:click={reset}>Reset</button>

</main>

<style>
  .correct {
    background-color: aquamarine;
  }
  .incorrect {
    background-color: red;
  }
</style>

在 Svelte 中的各种元素上更改多个类

Change multiple classes on various elements in Svelte

javascript

svelte

在 Svelte 中的各种元素上更改多个 类

Change multiple classes on various elements in Svelte

javascript

svelte

在 Svelte 中的各种元素上更改多个类