尝试读取元素的文本仅显示第一个元素的文本

Question

我正在从控制器获取列表并使用 ASP.Net MVC 以平铺格式将其显示在视图中。

当我点击一个特定的图块时，它应该会显示一条关于该特定图块的应用程序名称的 alert 消息。但是，无论我单击哪个图块，我都会获得所有图块的第一个应用程序名称。请帮忙。

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

Answer 1

问题是因为您选择了所有 .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() 那样强制数据类型。

尝试读取元素的文本仅显示第一个元素的文本

Attempting to read text of element shows text of first element only

html

javascript

jquery

asp.net-mvc-4