我的 jQuery 有問題，我想在不同的函式中傳遞兩個引數，但我沒有成功并在控制臺上收到錯誤訊息：
無效或意外的令牌
這是我的代碼：
@model UsersWithCoursesViewModel
@{
this.ViewData["Title"] = "Evaluation";
int counter = 1;
}
<h1 class="text-center mt-3 mb-3">@this.ViewData["Title"]</h1>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col">Course</th>
<th scope="col">Grade</th>
</tr>
</thead>
<tbody>
@foreach (var course in Model.Courses)
{
<tr>
<th>@counter</th>
<td>@course.AddedByUser</td>
<td>@course.CourseName</td>
<td class="d-flex justify-content-between" id="evaluation">
@course.Grade
<a class="btn btn-warning" onclick="addInput(@course.CourseId, '@course.AddedByUserId')">Change</a>
</td>
</tr>
counter ;
}
</tbody>
</table>
@section Scripts {
<script>
function addInput(courseId, addedByUserId) {
$("#evaluation").remove(".a").text(null).prepend("<label for='evaluation_input'>Evaluate</label><input id='evaluation_input' type='number' /><a class='btn btn-warning' onclick='evaluates(" courseId ", " addedByUserId ")'>Save</a>")
}
function evaluates(courseId, addedByUserId) {
const evaluation = $("#evaluation_input").val();
console.log(userId)
}
</script>
}
當我點擊與事件的按鈕addClick()，一切都OK（輸入出現，并courseId和addedByUserId被寫在控制臺），但是當我點擊的名稱保存并“求值”功能按鈕，我得到這個錯誤“無效的或意外的標記”。我認為問題來自addedByUserId變數，它是 GUID，當我改變它時
onclick='evaluates(" courseId ", " addedByUserId ")
對此
"evaluates(" courseId ", " 5 ")"
沒有問題（控制臺輸出“5”）。
uj5u.com熱心網友回復：
主要問題是由于您需要將行內事件處理程式的引數值用引號括起來。這些引號本身也需要轉義，這樣它們就不會干擾您正在構建的 JS 字串以及您正在構建的 HTML 屬性的語法。正確的語法是這樣的：
function addInput(courseId, addedByUserId) {
$("#evaluation").remove(".a").text(null).prepend('<label for="evaluation_input">Evaluate</label><input id="evaluation_input" type="number" /><a onclick="evaluates(\'' courseId '\', \'' addedByUserId '\')">Save</a>');
}
function evaluates(courseId, addedByUserId) {
const evaluation = $("#evaluation_input").val();
console.log(evaluation)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col">Course</th>
<th scope="col">Grade</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>AddedByUser_1</td>
<td>CourseName_1</td>
<td class="d-flex justify-content-between" id="evaluation">
Grade_1
<a class="btn btn-warning" onclick="addInput(1, 'AddedByUserId_1')">Change</a>
</td>
</tr>
<tr>
<th>2</th>
<td>AddedByUser_2</td>
<td>CourseName_2</td>
<td class="d-flex justify-content-between" id="evaluation">
Grade_2
<a class="btn btn-warning" onclick="addInput(2, 'AddedByUserId_2')">Change</a>
</td>
</tr>
<tr>
<th>3</th>
<td>AddedByUser_3</td>
<td>CourseName_3</td>
<td class="d-flex justify-content-between" id="evaluation">
Grade_3
<a class="btn btn-warning" onclick="addInput(3, 'AddedByUserId_3')">Change</a>
</td>
</tr>
</tbody>
</table>- 更新 -
然而，由于在運行時構建行內事件處理程式，這是相當丑陋的代碼，并且還有一個錯誤，即無論您單擊哪個“更改”鏈接，編輯input都只會添加到第一行。
要解決第一個問題，請使用帶有data屬性的不顯眼的事件處理程式來保存元素元資料。為了解決第二個問題，在所有重復的 HTML 結構上使用公共類以及 DOM 遍歷方法，以根據a點擊的元素定位它們。
更正后的代碼如下所示：
jQuery($ => {
let $template = $('#evaluation-template');
$('.btn.change').on('click', e => {
let $btn = $(e.target);
let template = $template.html().replace('[courseid]', $btn.data('courseid')).replace('[addedbyuserid]', $btn.data('addedbyuserid')).trim();
$btn.closest('.evaluation').html(template);
});
$(document).on('click', '.btn.save', e => {
let $btn = $(e.target);
console.log($btn.data('courseid'), $btn.data('addedbyuserid'));
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col">Course</th>
<th scope="col">Grade</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>AddedByUser_1</td>
<td>CourseName_1</td>
<td class="d-flex justify-content-between evaluation">
Grade_1
<a class="btn btn-warning change" data-courseid="1" data-addedbyuserid="AddedByUserId_1">Change</a>
</td>
</tr>
<tr>
<th>2</th>
<td>AddedByUser_2</td>
<td>CourseName_2</td>
<td class="d-flex justify-content-between evaluation">
Grade_2
<a class="btn btn-warning change" data-courseid="1" data-addedbyuserid="AddedByUserId_2">Change</a>
</td>
</tr>
<tr>
<th>3</th>
<td>AddedByUser_3</td>
<td>CourseName_3</td>
<td class="d-flex justify-content-between evaluation">
Grade_3
<a class="btn btn-warning change" data-courseid="1" data-addedbyuserid="AddedByUserId_3">Change</a>
</td>
</tr>
</tbody>
</table>
<script type="text/template" id="evaluation-template">
<label for="evaluation_input">Evaluate</label>
<input class="evaluation_input" type="number" />
<a class="btn btn-warning save" data-courseid="[courseid]" data-addedbyuserid="[addedbyuserid]">Save</a>
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/401920.html