javascript - 部分 View 部分地使用 JQuery，但不完全使用 C# ASP.Net MVC 5

Question

这是一个 ASP.Net MVC 5 项目。

我有一个简单的 jQuery 可以在鼠标悬停时淡入和淡出 HTML 元素，如下所示:

@Scripts.Render("~/bundles/jquery")
<script>
  $('.entrisButton').hover(function ()
    { $(this).fadeTo(1, 1); },
    function ()
    { $(this).fadeTo(1, 0.1); }
  );
</script>

在下面部分MyPartialView.cshtml View中使用(jQuery脚本在同一个MyPartialView.cshtml 文件):

<h2>
  @Html.Raw(Model.GetHeaderHtml())  
    <span class="entrisButton">
      <small>
        <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
        <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
        <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
      </small>
    </span>
</h2>

下面是 jQuery 的效果:

没关系...但是，上面的部分 MyPartialView.cshtml 在另一个 cshtml 文件中被多次调用，如下所示:

@if (Model != null) {
  <hr/>
  if (Model.Any()) {
    foreach (var item in Model) { //do something foreach item
      @Html.Partial("MyPartialView", item);
    }
  }
}

导致页面呈现如下:

---

---

如您所见，字母“a”有三个不同的结果(每个结果呈现一个 MyPartialView.cshtml)，并且每个结果在查询结果旁边都有三个字形 - 褪色出。

现在，前两个“a”显示鼠标悬停时的预期行为:

确定

---

---

但是最后一个“a”没有显示出预期的行为，虽然鼠标悬停在它上面，但淡入淡出不起作用:

不行

---

---

我注意到问题发生了，只要上面的查询结果(在本例中是第二个“a”)有有序列表(如上面的 1、2、3 所示)，那么下面的 MyPartialView.cshtml 未显示所需的行为。正如您在我的示例中注意到的那样，第一个“a”没有有序列表 - 因此淡入淡出有效。第二个“a”有一个有序列表 - 淡入淡出也有效。但是第三个“a”在带有有序列表的查询结果之后 - 它不起作用。

当查询结果是一致的，比方说，只有两个，第一个有有序列表，然后第二个的淡入和淡出不显示。

因此，我怀疑排序列表有问题，但我无法弄清楚原因。这是我的 MyPartialView.cshtml:

@using MyProject.Models
@using System.Linq;
@model ResultPerPhrase

@Scripts.Render("~/bundles/jquery")
<script>
  $('.entrisButton').hover(function ()
    { $(this).fadeTo(1, 1); },
    function ()
    { $(this).fadeTo(1, 0.1); }
  );
</script>

<h2>
  @Html.Raw(Model.GetHeaderHtml())  
    <span class="entrisButton">
      <small>
        <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
        <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
        <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
      </small>
    </span>
</h2>

@if (Model.results.Count() > 1) {
  <ol>
    @foreach (var result in Model.results) {
      <li>@Html.Raw(result.ToString())
        <span class="entrisButton">
          <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
          <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
          <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
        </span>
      </li>
    }
  </ol>
} else {
  <ul style="list-style: none;" class="adjusted-par">
    @foreach (var result in Model.results) {
      <li>@Html.Raw(result.ToString())
        <span class="entrisButton">
          <small>
            <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
            <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
            <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
          </small>
        </span>
      </li>
    }
  </ul>
}

这里会出什么问题？

Answer 1

这就是为什么您的 JavaScript 代码在加载 Html Dom 之前 运行的原因。为了避免这种行为，您需要将 JavaScript 代码包含在 $(document).ready(f‌ unction(){ yourCodeHere }) 或 $(function(){ yourCodeHere } 中(简写版本)。您可以在此处查看文档:https://learn.jquery.com/using-jquery-core/document-ready/

所以你的代码需要一个小改动:

 $(function(){
     $('.entrisButton').hover(function ()
         { $(this).fadeTo(1, 1); },
         function ()
         { $(this).fadeTo(1, 0.1); 
     });
 });