javascript - JavaScript 在 ASP .Net MVC 实体框架中不起作用
问题描述
我正在尝试使用 click 方法将按钮与某些 API 连接起来,但它不起作用。我网站其余部分的 JS 工作正常,但这似乎不喜欢我。 PS 我是 asp .net 的新手,我正在使用教程,所以如果以某种方式完成任何事情,因为这就是如何它在教程中完成。这是我创建问题的页面代码,
@model IEnumerable<GigHub.Models.Gig>
@{
ViewBag.Title = "Home Page";
}
<ul class="gigs">
@foreach(var gig in Model)
{
<li>
<div class="date">
<div class="month">
@gig.DateTime.ToString("MMM")
</div>
<div class="day" style="background:#f7f7f7;color:#333;font-size:20px;padding:6px 12px;">
@gig.DateTime.ToString("d ")
</div>
</div>
<div class="details">
<span class="artist">
@gig.Artist.Name
</span>
<span class="genre">
@gig.Genre.Name
</span>
<button data-gig-id="@gig.Id" class="btn btn-default btn-sm pull-right js-toggle-attendence">Going?</button>
</div>
</li>
}
</ul>
@section scripts
{
<script>
$(document).ready(function () {
$("js-toggle-attendence").click(function (event) {
var button = $(event.target);
$.post("/api/attendances", { gigId: button.attr("data-gig-id") }).done(function () {
button.removeClass("btn-default").addClass("btn-info").text("Going");
}).fail(function () {
alert("Error Occured!");
});
});
});
</script>
}`
这是似乎有问题的 div
<div class="details">
<span class="artist">
@gig.Artist.Name
</span>
<span class="genre">
@gig.Genre.Name
</span>
<button data-gig-id="@gig.Id" class="btn btn-default btn-sm pull-right js-toggle-attendence">Going?</button>
</div>
这是脚本
@section scripts
{
<script>
$(document).ready(function () {
$("js-toggle-attendence").click(function (event) {
var button = $(event.target);
$.post("/api/attendances", { gigId: button.attr("data-gig-id") }).done(function () {
button.removeClass("btn-default").addClass("btn-info").text("Going");
}).fail(function () {
alert("Error Occured!");
});
});
});
</script>
}`
解决方案
对于 jQuery,如果您想提及一个类,请使用 .
如果要提及 elementID,请使用符号 #
在您的代码中,您错过了符号 。在行中
$("js-toggle-attendence")
要更正它,请更改为
$(".js-toggle-attendence")
推荐阅读
- javascript - cowin api 问题。没有得到来自服务器的预期响应
- excel-formula - 从日期列表中获取即将到来的星期六
- html - 将css网格(显示:网格)的行对齐到顶部?
- python - 如何使用python将文本布局颜色更改为白色并将文本更改为黑色?
- wordpress - Woocommerce 在结帐按钮单击时显示模式
- javascript - 如何将选定的数据库列存储为 html 页面(nodejs - express)中的变量?
- mongodb - 使用另一个字段的值更新 MongoDB 数组字段值
- docker - 空手道测试 - 在 Docker 中运行时关键输入不起作用
- vuejs3 - Vue3 生命周期。当在另一个反应变量中使用时,反应变量不会更新
- vue.js - Vue路由器,当url与正确的url不匹配时重定向