如何在鼠标点击动态切换动态切换内容？

Question

这是我的脚本，在这里我想知道在切换功能中插入所有问题，我想改变它然后用鼠标点击显示每个问题，但只显示第一个问题，其他点击没有改变......应该怎么做我需要在这里转换。

window.onload = init;
var currentQuestion=1;
function init() {   
 switch (currentQuestion) {
			case 1: $('.question').html('what is your name?');
            break;
			case 2: $('.question').html('where are you from?');
            break;
			case 3: $('.question').html('what is your fav color?');
            break;
			case 4: $('.question').html('what is your fav flower?');
            break;
			case 5: $('.question').html('which is your native?');
            break;
        default: break;
    }
	}
	$("#next").click(function(){
	currentQuestion++;
	var before=currentQuestion-1;
	console.log(currentQuestion);
	console.log(before);
	//$("before").hide();
	});

.next img,.prev img
{
width:100px;
height:50px;
position:absolute;
}
.prev img
{left:115px;
}

<div class="question"></div>
<div class="input1" contenteditable="true"></div>
<div class="next">
<img id="next" src ="images/next-button.png" />
</div>
<div class="prev">
<img src ="images/download.jpg" />
</div>
<div class="answer"></div>

Answer 1

  

每次点击后都需要调用函数init。

将参数传递为currentQuestion，以便切换相应地工作。要在init上使用window.onload，我接受参数为currentQuestion

var currentQuestion = 1;
window.onload = function() {
  init(currentQuestion);
};


function init(currentQuestion) {
  switch (currentQuestion) {
    case 1:
      $('.question').html('what is your name?');
      break;
    case 2:
      $('.question').html('where are you from?');
      break;
    case 3:
      $('.question').html('what is your fav color?');
      break;
    case 4:
      $('.question').html('what is your fav flower?');
      break;
    case 5:
      $('.question').html('which is your native?');
      break;
    default:
      break;
  }
}
$("#next").click(function() {
  currentQuestion++;
  var before = currentQuestion - 1;
  init(currentQuestion);
});

.next img,
.prev img {
  width: 100px;
  height: 50px;
  position: absolute;
}
.prev img {
  left: 115px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="question"></div>
<div class="input1" contenteditable="true"></div>
<div class="next">
  <img id="next" src="images/next-button.png" />
</div>
<div class="prev">
  <img src="images/download.jpg" />
</div>
<div class="answer"></div>

Answer 2

您需要将$("#next")更改为$(".next")，因为标记中的选择器为class。 （因为图像未在当前标记中加载下一个id）

每次点击事件发生在您的下一个按钮时，您还必须调用init();功能。

同样的事情需要在你的上一个按钮中完成:)。

我希望这给了你一些想法。

window.onload = init;
var currentQuestion = 1;

function init() {
  switch (currentQuestion) {
    case 1:
      $('.question').html('what is your name?');
      break;
    case 2:
      $('.question').html('where are you from?');
      break;
    case 3:
      $('.question').html('what is your fav color?');
      break;
    case 4:
      $('.question').html('what is your fav flower?');
      break;
    case 5:
      $('.question').html('which is your native?');
      break;
    default:
      break;
  }
}

$(".next").click(function() {
  currentQuestion++;
  var before = currentQuestion - 1;
  init();
  console.log(currentQuestion);
  console.log(before);
  //$("before").hide();
});

.next img,
.prev img {
  width: 100px;
  height: 50px;
  position: absolute;
}
.prev img {
  left: 115px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question"></div>
<div class="input1" contenteditable="true"></div>
<div class="next">
  <img id="next" src="images/next-button.png" />
</div>
<div class="prev">
  <img src="images/download.jpg" />
</div>
<div class="answer"></div>

Answer 3

这里的答案没有错，但我想我可能会告诉你一种可能更简单的方法来做你需要的事情。

以下方法基本上是......

• 将所有问题（以|字符分隔）添加为问题div本身的数据属性
• 在问题div上添加一个存储为属性的计数器，以跟上当前索引
• 当用户点击下一个或上一个按钮时，检查它是下一个还是上一个，并相应地从索引中添加或减去
• 显示存储在新索引中的问题

这种方法的一个很好的好处是，如果需要，您可以在同一页面上有多个问题元素而无需更改任何代码，只需添加HTML

Here is a fully commented jsFiddle explaining the code

$('.next, .prev').click(function() {
  var $this = $(this);
  var $questionDiv=$this.prevAll('.question');
  var storedQuestions = $questionDiv.data('stored-questions').split('|');
  var cur = Number($questionDiv.data('current-question'));
  var setTo = $this.hasClass('next') ? cur+1 : cur-1;
  setTo = setTo > (storedQuestions.length-1) ? 0 : setTo < 0  ? (storedQuestions.length-1) : setTo; 
  $questionDiv.html(storedQuestions[setTo]).data('current-question',setTo);
});

.next img,
.prev img {
  width: 100px;
  height: 50px;
  position: absolute;
  cursor:pointer;
}
.prev img {
  left: 115px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="question" data-current-question="0" data-stored-questions="what is your name?|where are you from?|what is your fav color?|what is your fav flower?|which is your native?">what is your name?</div>
<div class="input1" contenteditable="true"></div>
<div class="prev">
  <img src="https://placeholdit.imgix.net/~text?txtsize=48&txt=Prev&w=350&h=150" />
</div>
<div class="next">
  <img id="next" src="https://placeholdit.imgix.net/~text?txtsize=48&txt=Next&w=350&h=150" />
</div>
<div class="answer"></div>