Question

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

<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>

这是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();    
});

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

Answer 1

如评论中所述，在jQuery中使用data-*自定义属性而不是自己的属性与this一起使用，以使代码可重用。我还建议将每个问题都包含在自己的元素中，就像包装div一样。

$('.button').click(function () {
    var checked = $(this).parent().find('input:checked').data('mess');
    $(this).parent().find('.answer p').remove();
    $(this).parent().find('.answer').append("<p>" + checked + "</p>");
});
$('input[value="Clear"]').click(function () {
    $(this).parent().find('.answer p').remove();
});

<强> jsFiddle example

Answer 2

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

这是一个有效的 jsFiddle

代码：

// 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');
    }
}

它没有任何CSS看起来非常基本，但如果你想要它可以让它看起来很漂亮！

我怎样才能在更大规模上做到这一点？

2 个答案: