在jQuery中使用ticks,反引号和双引号?

时间:2017-09-07 15:14:00

标签: jquery

我试图用jQuery追加div,我已经在使用"和'。我可以使用反引号,因为我已经在命令中选择了元素吗?

$(this).append("<div class='row'><div id='addQuestion' style='float:left;' class='col-sm-6'><h3 style='margin-bottom:15px;'>Submit Question</h3><form onsubmit='createQuestion(quizType, $("#submitQ").val(), $("#submitA1").val(), $("#submitA2").val(), $("#submitA3").val(), $("#submitA4").val(), $("#submitCorrect").val(), $("#submitExpl").val(), $("#submitAuthor").val(), $("#submitDesc").val(), $("#submitDate").val());return false;' method='POST'><label style='margin-right:30px;' for='add-banking-question'><input class='form-control' id='add-banking-question' type='radio' name='add-q-quizType' value='BankingQuizQuestion' checked>Investment Banking</label><label for='add-trading-question'><input class='form-control' id='add-trading-question' type='radio' name='add-q-quizType' value='TradingQuizQuestion'>Sales & Trading</label><input style='margin-top:10px;' class='form-control' type='text' id='submitQ'  placeholder='Question' name='addq-q'><input class='form-control' type='text' id='submitA1' placeholder='Answer 1' name='addq-a1'><input class='form-control' type='text' id='submitA2' placeholder='Answer 2' name='addq-a2'><input class='form-control' type='text' id='submitA3' placeholder='Answer 3' name='addq-a3'><input class='form-control' type='text' id='submitA4' placeholder='Answer 4' name='addq-a4'><input class='form-control' type='text' id='submitCorrect' placeholder='Correct answer index' name='addq-correct'><input class='form-control' type='text' id='submitDesc' placeholder='Short description' name='addq-desc'><textarea class='form-control' type='text' id='submitExpl' placeholder='Explanation' name='addq-expl'></textarea><input class='form-control' type='text' id='submitAuthor' placeholder='Your name' name='addq-author'><input class='form-control' type='text' hidden id='submitDate' name='addq-date'><input class='btn btn-primary' type='submit' value='Submit question'><div hidden id='success-submit'>Successfully submitted. Thanks!</div></form></div></div>")

1 个答案:

答案 0 :(得分:0)

你可以使用反引号来划分你的字符串,只要你想要支持ES2016的浏览器 - 大多数IE都是例外,就像往常一样。

$('#foo').append(`<div class="row"><div id="addQuestion" style="float:left;" class="col-sm-6"><h3 style="margin-bottom:15px;">Submit Question</h3><form onsubmit="createQuestion(quizType, $('#submitQ').val(), $('#submitA1').val(), $('#submitA2').val(), $('#submitA3').val(), $('#submitA4').val(), $('#submitCorrect').val(), $('#submitExpl').val(), $('#submitAuthor').val(), $('#submitDesc').val(), $('#submitDate').val());return false;"method="POST"><label style="margin-right:30px;" for="add-banking-question"><input class="form-control" id="add-banking-question" type="radio" name="add-q-quizType" value="BankingQuizQuestion" checked>Investment Banking</label><label for="add-trading-question"><input class="form-control" id="add-trading-question" type="radio" name="add-q-quizType" value="TradingQuizQuestion">Sales & Trading</label><input style="margin-top:10px;" class="form-control" type="text" id="submitQ" placeholder="Question" name="addq-q"><input class="form-control" type="text" id="submitA1" placeholder="Answer 1" name="addq-a1"><input class="form-control" type="text" id="submitA2" placeholder="Answer 2" name="addq-a2"><input class="form-control" type="text" id="submitA3" placeholder="Answer 3" name="addq-a3"><input class="form-control" type="text" id="submitA4" placeholder="Answer 4" name="addq-a4"><input class="form-control" type="text" id="submitCorrect" placeholder="Correct answer index" name="addq-correct"><input class="form-control" type="text" id="submitDesc" placeholder="Short description" name="addq-desc"><textarea class="form-control" type="text" id="submitExpl" placeholder="Explanation" name="addq-expl"></textarea><input class="form-control" type="text" id="submitAuthor" placeholder="Your name" name="addq-author"><input class="form-control" type="text" hidden id="submitDate" name="addq-date"><input class="btn btn-primary" type="submit" value="Submit question"><div hidden id="success-submit">Successfully submitted. Thanks!</div></form></div></div>`)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>

如果您的目标是旧浏览器,那么您需要根据需要使用\'\"来转义内部引号。

话虽如此,我对您的代码有几点建议:

首先,始终将样式放在外部样式表中。不要使用内联style属性。同样,使用不显眼的事件处理程序。请勿在HTML中添加onsubmit或任何onX事件属性。

其次,由于许多HTML与您的JS代码紧密相关,您将来会创建一个严重的维护问题。我建议在加载页面时在DOM中创建所有HTML,但隐藏它。然后,您可以在需要时添加clone()并附加。这解耦了JS和HTML,并使JS代码更短。