我正在使用 ASP.Net MVC 从 Controller 获取列表并以平铺格式将其显示在 View 中。
当我点击一个特定的图 block 时,它应该显示一条关于该特定图 block 的应用程序名称的 alert
消息。但是,无论我单击哪个图 block ,我都会获得所有图 block 的第一个应用程序名称。请帮忙。
<div class="container">
<section class="cms-boxes">
<div class="container-fluid">
<div class="row">
@foreach (var item in Model)
{
<div class="col-md-4 cms-boxes-outer">
<div class="cms-boxes-items cms-features">
<div class="boxes-align">
<div class="small-box">
<h2 class="appnamedisplay">@Html.DisplayFor(modelItem => item.ApplicationName)</h2>
<p>@Html.DisplayFor(modelItem => item.number)</p>
</div>
</div>
</div>
</div>
}
</div>
</div>
</section>
</div>
$(document).ready(function() {
$(".small-box").click(function() {
var name = $(".appnamedisplay").html();
alert(name);
});
});
最佳答案
问题是因为您选择了 所有 .appnamedisplay
元素。对该集合调用 html()
只会显示该集合中第一个元素的值。
要解决此问题,请使用 DOM 遍历查找与单击的 .small-box
相关的特定 .appnamedisplay
元素。为此,请使用 this
关键字来引用引发事件的元素,以及 jQuery 的 find()
方法:
$(".small-box").click(function () {
var name = $(this).find(".appnamedisplay").html();
console.log(name);
});
另请注意,首选使用 console.log()
进行调试,因为它不会阻止 UI 更新,也不会将数据类型强制为 alert()
确实如此。
关于javascript - 尝试读取元素的文本仅显示第一个元素的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53265760/