Question

我今天在网上搜索了几个小时，发现了一些有用的东西，但我不能让它按照我的意愿100％工作。如果有人可以帮助那将是太棒了！在我的下面的代码中，我删除了任何可能暴露我工作的业务可能不想分享的数据的内容，它们将以“＆lt; SOMETHING＆gt;”表示。这是我的问题：我正在填充MVC网格

 @Html.Grid(Model.Activities).WithModel(New <CLASSNAME HERE>(Html)).Sort(ViewData.Item("actgridsort"))

这部分工作得很好，网格是显示支持团队在支持问题上采取的活动，我可以使用网格内部的“详细信息”链接“钻取”每个活动，每个活动内部都有一个“备注“部分。我试图让用户只需将鼠标悬停在网格上与该特定活动相关的单元格上即可查看活动中的注释。例如：活动101可能包含注释“Hello world” 活动102可以包含“再见世界”

目前，如果我将鼠标悬停在活动101上，我的代码会显示：

hello world
goodbye world

但是，如果我将鼠标悬停在102以上，则不会显示任何内容。我希望它在悬停超过101时显示“Hello world”，在102等时显示“再见世界”

到目前为止我的代码是： --view ---

  @code
   For Each Activity In Model.Activities
      @<div id ='@string.Format("Activity{0}", Activity.ClgCode)' class = "ActivityDetails">
     <br />
      Activity @Activity.ClgCode:
      <b>
       @Activity.Notes

      </b>
      </div>
  Next

End Code

- JS -

<script>
    $(".ActivityDetails").hide();
  $("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $("td:first", this).text()).toggle() });

</script>

以下是@satpal请求的控制台中的脚本输出出于隐私原因，我在这里删除了一些评论。

   <div class="display-label" >Details:</div>
    <div class="display-field display-field-bordered">
    <pre>
        <span style="white-space: pre-line">
PROBLEM WRITTEN HERE
 </span>

    </pre>
    </div>


</div>

<p>
    <table class="grid"><thead><tr><th><a href="/SupportCall/Details/2999?Column=ClgCode&amp;Direction=Ascending">Activity No.</a></th><th><a href="/SupportCall/Details/2999?Column=CntctDate&amp;Direction=Ascending">Date</a></th><th>Time</th><th><a href="/SupportCall/Details/2999?Column=ActivityType&amp;Direction=Ascending">Type</a></th><th><a href="/SupportCall/Details/2999?Column=ActivitySubject&amp;Direction=Ascending">Subject</a></th><th><a href="/SupportCall/Details/2999?Column=Priority&amp;Direction=Ascending">Priority</a></th><th>Details</th><th><a href="/SupportCall/Details/2999?Column=UserName&amp;Direction=Ascending">Ochiba Contact</a></th><th><a href="/SupportCall/Details/2999?Column=BPContact&amp;Direction=Ascending">Customer Contact</a></th><th class="sort_asc"><a href="/SupportCall/Details/2999?Direction=Descending"></a></th></tr></thead><tbody><tr class="gridrow"><td>6625</td><td>06/01/2014</td><td>12:24</td><td>Support</td><td>Website</td><td>0</td><td>Request for Further info from client</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6625">Details</a></td></tr><tr class="gridrow_alternate"><td>6627</td><td>06/01/2014</td><td>12:32</td><td>Support</td><td>Website</td><td>1</td><td></td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6627">Details</a></td></tr><tr class="gridrow"><td>6628</td><td>06/01/2014</td><td>12:34</td><td>Support</td><td>Website</td><td>0</td><td>Issue with Credit Card Payment</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6628">Details</a></td></tr><tr class="gridrow_alternate"><td>6630</td><td>06/01/2014</td><td>12:43</td><td>Support</td><td>Website</td><td>0</td><td>Request for further information</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6630">Details</a></td></tr><tr class="gridrow"><td>6631</td><td>06/01/2014</td><td>13:07</td><td>Support</td><td>Website</td><td>0</td><td>Issue with Credit Card Payment</td><td>Sue Simpson</td><td>Adrian Owen</td><td><a href="/Activity/Details/6631">Details</a></td></tr><tr class="gridrow_alternate"><td>6632</td><td>06/01/2014</td><td>13:25</td><td>Support</td><td>Website</td><td>0</td><td>Update to client</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6632">Details</a></td></tr><tr class="gridrow"><td>6635</td><td>06/01/2014</td><td>15:57</td><td>Support</td><td>Website</td><td>0</td><td>Update to client after investigation and referral to 3rd Par</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6635">Details</a></td></tr><tr class="gridrow_alternate"><td>6639</td><td>07/01/2014</td><td>09:01</td><td>Support</td><td>Website</td><td>0</td><td>Response to client after update from 3rd Party</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6639">Details</a></td></tr></tbody></table>
          <div id ='Activity6625' class = "ActivityDetails">
         <br />
          Activity 6625:

          <b>
NOTES HERE  
          </b>
          </div>
          <div id ='Activity6627' class = "ActivityDetails">
         <br />
          Activity 6627:

          <b>
          NOTES HERE

          </b>
          </div>
          <div id ='Activity6628' class = "ActivityDetails">
         <br />
          Activity 6628:

          <b>
NOTES HERE
          </b>
          </div>
          <div id ='Activity6630' class = "ActivityDetails">
         <br />
          Activity 6630:

          <b>
NOTES HERE

          </b>
          </div>
          <div id ='Activity6631' class = "ActivityDetails">
         <br />
          Activity 6631:

          <b>
NOTES HERE
          </b>
          </div>
          <div id ='Activity6632' class = "ActivityDetails">
         <br />
          Activity 6632:

          <b>
NOTES HERE 
          </b>
          </div>
          <div id ='Activity6635' class = "ActivityDetails">
         <br />
          Activity 6635:

          <b>
NOTES HERE

          </b>
          </div>
          <div id ='Activity6639' class = "ActivityDetails">
         <br />
          Activity 6639:

          <b>
     NOTES HERE
          </b>
          </div>
</p>
<script>
    $(".ActivityDetails").hide();
  // $("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $("td:first", this).text()).toggle() });

   // $("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $("td:first", this).text()).toggle() });
    $("table.grid tbody tr td:first-child").hover(function () {
        $(".ActivityDetails" + $(this).text()).show()
    }, function () {
        $(".ActivityDetails" + $(this).text()).hide()
    });
//    $("table.grid tbody tr td:first").hover(function () {
//        var selectValue = $(this).siblings("td:first").html();
//    $(".ActivityDetails" + $(selectValue, this).text()).toggle() });

</script>

非常感谢任何花时间阅读此内容的人。

Answer 1

尝试

$("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $(this).text()).toggle() });

OR

$("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $(this).text()).show() },function () { $(".ActivityDetails" + $(this).text()).hide() });

<强>更新

您在哪里使用不正确的标识符

$(".ActivityDetails").hide();

$("table.grid tbody tr td:first-child").hover(function () {
      $(".ActivityDetails").hide();
      $("#Activity" + $(this).text()).show()
});

Fiddle DEMO

MVC Grid（VB）：显示悬停的详细信息

1 个答案: