Question

这是一个测验。用户有一个问题，可以选择三个答案。答案是按钮。每个按钮都有一个值。当用户单击该按钮时，它会给出一个值，然后转到下一个问题。这个过程通过一系列7个问题重复进行。在此过程中，我希望它添加每个单击的值并在结尾处累积总计。

我不确定是否应该为此创建一个循环？我还要注意，这是在没有使用.show和.hide功能刷新页面的情况下完成测验的不同部分。

感谢您的帮助！

以下是按钮：

<button class="blue" id="goat" value="5">ANSWER  1</button>
     <button class="blue" id="bird" value="10">ANSWER  2</button>
     <button class="blue" id="fish" value="15">ANSWER  3</button>

	function charValue () {
		$(this).val();
	}
	
	var storedValue = $(this).$("button").data(charValue);
	var accumValue = storedValue + charValue;
	
	$("button").on('click', charValue);

Answer 1

您可以在最后添加最后一个按钮，例如：

<button id="finalbutton">Get Results</button>

然后像这样创建javascript：

var accumValue = 0;

$("button").on('click', function() {

    if(!$(this).attr('value')) {
        return;
    }

    accumValue += parseInt($(this).attr('value'));
});

$('#finalbutton').on('click', function() {
    alert(accumValue);
});

Answer 2

试试这个：

＆＃13;

$("button").click(function() {
  var curScore = parseInt($("span").text(), 10);
  var newScore = parseInt($(this).val(), 10);
  $("span").text(curScore + newScore);
  $(this).parent().hide();
  $(this).parent().next().show();
});

＆＃13;

.Question{display: none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="Question" style="display: block;">
  <h3>Question 1</h3>

  <button class="blue" id="goat" value="5">ANSWER 1</button>
  <button class="blue" id="bird" value="10">ANSWER 2</button>
  <button class="blue" id="fish" value="15">ANSWER 3</button>
</div>
<div class="Question">
  <h3>Question 2</h3>

  <button class="blue" id="goat" value="5">ANSWER 1</button>
  <button class="blue" id="bird" value="10">ANSWER 2</button>
  <button class="blue" id="fish" value="15">ANSWER 3</button>
</div>
<div class="Question">
  <h3>Question 3</h3>

  <button class="blue" id="goat" value="5">ANSWER 1</button>
  <button class="blue" id="bird" value="10">ANSWER 2</button>
  <button class="blue" id="fish" value="15">ANSWER 3</button>
</div>
<p>The final score is <span>0</span>
</p>

＆＃13;

您可以使用.val()获取价值并将其相加。

要在选择答案后隐藏当前问题，并显示下一个答案，请使用代码：

$(this).parent().hide();
$(this).parent().next().show();

Answer 3

您可以使用下面的代码并在结尾显示总和，DEMO此处

var sum= 0;
$("button").click(function() {
        sum = sum + parseInt($(this).val());
        //alert(sum);
});

Answer 4

您可以将所有问题都放在同一页面上。当用户完成问题时，隐藏已完成的问题并显示下一个未答复的问题。

每次回答问题时，请将选定的答案添加到提交表单中。当用户完成所有问题后，显示提交按钮，让一个人提交他的答案。

将点击的值添加到储值查询

4 个答案: