Question

我正在建立一个测验网站，用户可以在其中创建自己的测验。由于javascript函数问题，当标记和类在DOM的不同部分中被命名为相同时，我不得不更改元素标记名称和类名以防止错误。

请参阅下面的代码摘录和我的问题。我有很多问题选项，但这是一个例子：

HTML主要测验页面：

<ul id = "question1" class = "questions">What colour is my hair?
    <li>Brown</li>
    <li class = "correct">Blonde</li>
    <li>Red</li>
    <li>Black</li>
</ul>

HTML创建测验页面：

<p id = "questionOption1" class = "questionChoice">What Superpower would I have?
    <span class = "correctAnswer">Fly</span>
    <span>Invisibility</span>
    <span>Telekenisis</span>
    <span>Super Strength</span>
</p>
Now pick your correct answer & click Save
<button class="Save">Save</button>

我要做的是将question1内容替换为questionOption1内容并更改类＆＃34; correctAnswer＆＃34;到＆＃34;纠正＆＃34;因此，当您单击主测验页面上的保存按钮问题1时，将变为：

HTML：

<ul id = "question1" class = "questions">What Superpower would I have?
    <li class = "correct">Fly</li>
    <li>Invisibility</li>
    <li>Telekenisis</li>
    <li>Super Strength</li>
</ul>

我的所有javascript工作正在跟踪用户获得的问题数量的分数。我现在真正需要做的就是更改questionOptions代码块的元素和类，并将其插入主测验页面上的question1代码块，但我只是不知道如何在实际更改标记名称和类时点击保存。

这是一个html文件，使用hide（）show（）方法按部分分隔。

任何帮助都将非常感谢...谢谢！

Answer 1

如果你只是想用问题1的html替换问题1的html，你可以做类似的事情

$( ".Save" ).click(function() {
    var questionOptionHtml = $('#questionOption1').html();
    $('#question1').html(questionOptionHtml);
});

我会承认.Save点击让我担心。如果您在页面上只有一个问题，我建议按下

<button id="save">Save</button>

然后将.click方法更改为

$( ".Save" ).click(function() {
    var questionOptionHtml = $('#questionOption1').html();
    $('#question1').html(questionOptionHtml);
});

如果您有多个问题并保存在1页以上，我会将此保存按钮设为ID，让每个问题块都有一个周围的类来与其关联的点击事件，或使其更具活力。我强烈推荐后者，即使它稍微复杂一点，未来的维护也一定会少。

Answer 2

你可以像Jared Drake的答案那样做。

但我认为使用像handlebars这样的模板引擎来简化标记的替换会更容易。

通过模板化，您可以将问题存储在对象中，并在更改时重新渲染它们。

请查看下面的演示或此jsfiddle。

＆＃13;

searchingClients()

＆＃13;

clientManager

＆＃13;

var $answerOptions = $('.createQuestion span'),
	data = {
    	questions: [{
            no: 1,
            question: 'What colour is my hair?',
            answers: [
                {correct:false, text: 'Brown'},
                {correct:true, text: 'Blonde'},
                {correct:false, text: 'Red'},
                {correct:false, text: 'Black'}
            ]
        }]
    };

// compile handlebars
function renderQuestions() {
    var source = $("#appTemplate").html();
    //console.log(source);
    var template = Handlebars.compile(source);

    $('#questionContainer').html(template(data));
}

renderQuestions(); // initial render
//console.log($answerOptions);

// --------------------- question functions --------------------
$(document).on('click', '#questionContainer li', function() {
	var answer = $(this).hasClass('correct');
    
    // remove previous choices
    $(this).parent().find('li').removeClass('correctChoice incorrectChoice');
	
    //console.log(answer);
    $(this).addClass(answer ? 'correctChoice': 'incorrectChoice');
});


//---------------------- creation function ------------------
// select answer option click handler
$('.createQuestion span').click(function(e) {
	var $answerOptions = $(e.currentTarget).parent().find('span');
    
    $answerOptions.removeClass('correctAnswer');
    $(e.target).closest($('span')).addClass('correctAnswer');
    //console.log($answerOptions);
    
});

$('.createQuestion .add').click(function(e) {
	var $answerOptions = $(e.currentTarget).parent().find('span'),
    	newQuestion = {
        	no: data.questions.length,
            question: $('.questionChoice').clone().children().remove().end().text(), // works but a markup change would be better here
            answers: []
        };
	$answerOptions.each(function(index, answer) {
    	 newQuestion.answers.push({
            correct: $(answer).hasClass('correctAnswer'),
            text: $(answer).text()
        });
    });
    
    data.questions.push(newQuestion);
    renderQuestions();
    //console.log(newQuestion);
});

＆＃13;

如何更改标签和内容onclick

2 个答案: