Question

我正在创建一个简单的测验，询问用户他们应该购买什么样的汽车。我无法让测验一次显示一个问题，就像我想要的那样。我不确定我做错了什么。完整代码位于this codepen

我确定问题是代码的这一部分。有人能告诉我我做错了什么吗？

//question counter
var question = 1;
maxQuestions = 4;

//event handler for click event
var nextButton = document.getElementById('next');
nextButton.onClick = function() {
  question++;
  if (question === maxQuestions) {
    //hide the next button
    $(nextButton).addClass("hidden");
  }
  //hide the last question  
  $('question' + (question - 1)).addClass("hidden");
  //show the current question  
  $('question' + question).removeClass("hidden");  
};

var prevButton = document.getElementById('prev');
prevButton.onClick = function() {
  question--;
  if (question === 1) {
    //hide the prev button
    $(prevButton).addClass("hidden");
  }
  //hide current question
  $('question' + (question + 1)).addClass("hidden");
  //show the last question
  $('question' + question).removeClass("hidden");
};

//show submit
if (question === maxQuestions) {
  $('submit').removeClass("hidden");
};

Answer 1

你好，看起来有两件事需要更新

添加＆＃39;＃＆＃39;到您的元素选择器
使用onclick而不是onClick

这是codepen中更新的链接 https://codepen.io/anon/pen/PmpQxo

//question counter
var question = 1;
maxQuestions = 4;

//event handler for click event
var nextButton = document.getElementById('next');
nextButton.onclick = function() {
  question++;
  if (question === maxQuestions) {
    //hide the next button
    $(nextButton).addClass("hidden");
  }
  console.log('next', question);
  //hide the last question  
  $('#question' + (question - 1)).addClass("hidden");
  //show the current question  
  $('#question' + question).removeClass("hidden");  
};

var prevButton = document.getElementById('prev');
prevButton.onclick = function() {
  question--;
  if (question === 1) {
    //hide the prev button
    $(prevButton).addClass("hidden");
  }
  //hide current question
  $('#question' + (question + 1)).addClass("hidden");
  //show the last question
  $('#question' + question).removeClass("hidden");
};

//show submit
if (question === maxQuestions) {
  $('#submit').removeClass("hidden");
};

Answer 2

您已经使用了jQuery，因此您不必通过索引跟踪问题。 jQuery提供.siblings()，.next()和.prev()来帮助导航。

例如，使用这些而不是索引的快速解决方案可能看起来像这样

https://codepen.io/anon/pen/mmWXeQ?editors=1111

无法让我的Javascript添加或删除类

2 个答案: