如何更改标签和内容 onclick

Question

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

请在下面查看我的代码摘录和我的问题。我有很多问题选项，但这里有一个例子：

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 内容并将类“correctAnswer”更改为“正确”，因此当您单击主测验页面上的保存按钮时，question1 变为：

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

如果你只是想用questionOption1的html替换问题1的html，你可以这样做

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

我承认 .Save 点击让我很担心。如果页面上只有 1 个问题，我建议您将按钮设为

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

然后将.click方法改为

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

如果您有多个问题并保存在超过 1 个页面上，我会让这个保存按钮有 id，让每个问题块都有一个周围的类来关联一个点击事件，或者让它更有活力。我强烈推荐后者，即使它会稍微复杂一些，但将来肯定会减少维护。

Answer 2

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

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

通过模板，您可以将您的问题存储在一个对象中，并在更改时重新呈现它们。

请看下面的演示或jsfiddle。

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

.createQustion, span {
    display: block;
}

.correctAnswer {
    background-color: green;
}

.correctChoice {
    border: 1px solid green;
}

.incorrectChoice {
    border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/x-handlebars-template" id="appTemplate">
	{{#each questions}}
    	{{this.question}}
        <ul class="questions" id={{this.no}}>
            {{#each answers}}
                {{#if this.correct}}
                	<li class='correct'>{{this.text}}</li>
                {{else}}
                	<li>{{this.text}}</li>
                {{/if}}
            {{/each}}
        </ul>
    {{/each}}
</script>
<div id="app">
    <div id="questionContainer">
    </div>
    <div class="createQuestion">
        <h2>
        Enter new question:
        </h2>
        <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="add">Add question</button>
    </div>
</div>