我怎样才能在更大的范围内做到这一点？ [英] How Can I Do This On a Larger Scale?

问题描述

我有一些个性测验的代码，但我不确定如何在不拖动它的情况下增加此代码的大小。以下是HTML代码：

 < h3> 1。你多大了？< / h3> 
< input type =radiomess =whats upname =q1value =Aclass =correct/> A. 1-50。 
< input type =radiomess =你做了它name =q1value =Bclass =correct/> B. 50-100。 
< input class =buttontype =submitvalue =Submit/> < input type =resetvalue =Clear/> 
< p class =answer>< / p> 
  

以下是JavaScript代码：

  var checked; 
 $（'。button'）。click（function（）{
 checked = $（'input：checked'）。attr（'mess'）; 
 $（'。answer p '）.remove（）; 
 $（'。answer'）。append（< p>+ checked +< / p>）; 
}）; 
 $（'input [value =Clear]'）。click（function（）{
 $（'。answer p'）。remove（）; 
}）; 
  

我想要做同样的事情，但对于一个有五个问题和所有问题的测验用户的答案变成他们的一个重要的最终答案，答案根据他们选择的单选按钮而不同。那么是否还有其他方式可以做到这一点，但不必为每个单选按钮重复代码？

解决方案

我为你制作了一个功能，因为它看起来很有趣：D

以下是 jsFiddle

以及代码：

  //根据需要添加许多问题！ 
 addRadioQuestion（你几岁？，[1-50，50-100]）; 
 
 //问题是一个字符串，options是一个字符串数组
 function addRadioQuestion（question，options）{
 
 if（$ .isArray（options）& amp ;& typeof question ===string）{
 //获取之前问题的数量
 var qNum = $（'。question'）。length + 1; 
 
 //创建一个包含div 
 var questionDiv = $（'< div />'）。addClass（'question'）; 
 
 //将题目添加到questionDiv 
 questionDiv.append（$（'< h3 />'）。text（qNum +。+ question））; 
 
 //为每个选项添加一个单选按钮
用于（var i = 0; i< options.length; i ++）{
 //使用数字转换为使用lettters ASCII 
 var optionVal = String.fromCharCode（65 + i）; 
 
 var option = $（'< input />'）
 .attr（'type'，'radio'）
 .attr（'data-message'，选项[i]）
 .attr（'name'，'q'+ qNum）
 .attr（'value'，optionVal）
 .addClass（'correct'）
 
 var optionText = $（'< label />'）
 .text（optionVal +'。'+ options [i]）
 .append（option）; 
 
 questionDiv.append（optionText）; 
 
 $ b $ //追加提交按钮
 questionDiv.append（$（'< input />'）
 .addClass（'button'）
 .attr（'type'，'submit'）
 .attr（'value'，'Submit'）
 .on（'click'，function（）{
 var theirAnswer = $（this）.closest（'。question'）。find（'input：checked'）。attr（'data-message'）; 
 console.log（$（this）.closest（'。question' ）.find（'input：checked'）。attr（'data-message'））
 $（this）.siblings（'。answer'）。text（theirAnswer）; 
}））; 
 
 //追加清除按钮
 questionDiv.append（$（'< input />'）
 .addClass（'button'）
 .attr（ ''''，'''''''''$'$'$'$'$'$'$'$'$' （''）; 
（this）.siblings（'。answer'）。text（）; 
 }））; 
 
 //追加答案段落
 questionDiv.append（$（'< p />'）。addClass（'answer'））; 
 
 questionDiv.appendTo（'body'）; 
 
 
 $ / code $ / pre 
 
 
没有任何CSS，它看起来很基本，但你可以使它看起来漂亮，如果你想要的！
 
I have some code for a personality quiz but I'm not sure how I can increase the size of this code without dragging it on. Here is the HTML code:
<h3>1. How old are you?</h3>
<input type="radio" mess="whats up" name="q1" value="A" class="correct"/> A. 1-50.
<input type="radio" mess="You did it" name="q1" value="B" class="correct"/> B. 50-100.
<input class="button" type="submit" value="Submit" /> <input type="reset" value="Clear" />
<p class="answer"></p>
And here is the JavaScript code:
var checked;
$('.button').click(function(){
    checked = $('input:checked').attr('mess');
    $('.answer p').remove();
    $('.answer').append("<p>"+checked+"</p>");
});
$('input[value="Clear"]').click(function(){
    $('.answer p').remove();    
});
I want do do that same kind of thing but for a quiz with maybe five questions and all the questions that the user answers turns into one big final answer for them and the answer is different depending on which radio buttons they choose. So is there any other way I can do that but without repeating the code for each radio button? 
解决方案
I made a function for you because it looked like fun :D

Here's a working jsFiddle

And the code:
// Add as many questions as you like!
addRadioQuestion("How old are you?", ["1-50","50-100"]);

// Question is a string and options is an array of strings
function addRadioQuestion (question, options) {

    if ($.isArray(options) && typeof question === "string") {
        // Get the number of previous questions
        var qNum = $('.question').length + 1;

        // Create a containing div
        var questionDiv = $('<div/>').addClass('question');

        // Add title to questionDiv
        questionDiv.append($('<h3/>').text(qNum + ". " + question));

        // Add a radio button for each option
        for (var i = 0; i < options.length; i++) {
            // Converting from numbers to lettters using ASCII
            var optionVal = String.fromCharCode(65 + i);

            var option = $('<input/>')
                .attr('type', 'radio')
                .attr('data-message', options[i])
                .attr('name','q' + qNum)
                .attr('value', optionVal)
                .addClass('correct')

            var optionText = $('<label/>')
                .text(optionVal + '. ' + options[i])
                .append(option);

            questionDiv.append(optionText);
        }

        // Append Submit Button
        questionDiv.append($('<input/>')
            .addClass('button')
            .attr('type', 'submit')
            .attr('value', 'Submit')
            .on('click', function() {
                var theirAnswer = $(this).closest('.question').find('input:checked').attr('data-message');
                console.log($(this).closest('.question').find('input:checked').attr('data-message'))
                $(this).siblings('.answer').text(theirAnswer);
            }));

        // Append Clear Button
        questionDiv.append($('<input/>')
            .addClass('button')
            .attr('type', 'reset')
            .attr('value', 'Clear')
            .on('click', function() {
                $(this).closest('.question').find('input:checked').prop('checked', false);
                $(this).siblings('.answer').text("");   
            }));

        // Append answer paragraph
        questionDiv.append($('<p/>').addClass('answer'));

        questionDiv.appendTo('body');
    }
}
It looks pretty basic without any CSS, but you can make it looks pretty if you want!

                        
这篇关于我怎样才能在更大的范围内做到这一点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！