Question

我正在尝试使用jquery工具提示显示自定义内容的工具提示中的每条记录的信息。它不显示每个项目的记录，只显示第一个记录详细信息。下面是视图代码，其中包括代码和脚本。

我循环遍历每个项目

@foreach (var item in Model.Courses)

我希望在鼠标悬停时显示每条记录的工具提示

<div class="item">
   <a href="" class="subitem">Detail</a>
</div>

查看

<form id='familyform' method='post'>

 @using (Html.BeginFormAntiForgeryPost(Url.Action("Summary", "SignupOrLogin", new { area = "Course" })))
 {      
            <div style="height:5px"></div>
            <label style="font-weight:bold">Select Course</label>
            <div style="height:5px"></div>
            <div style=" border: 1px solid #CCCCCC;">   

                @foreach (var item in Model.Courses)
                {                      
                    <table style="margin-left:10px;margin-top:5px">
                        <tr style="height:22px">
                            <td style="width:50px">
                                <input type="checkbox" name="chkcourse@(item.Course.Id)" value="@item.Course.Name" />
                            </td>
                            <td style="width:5px">
                            </td>
                            <td style="width:300px">
                                <label style="font-size:smaller;color:#373737;">@item.Course.Name</label>

                            </td>                                
                            <td>
                                <label style="width:100px;font-size:smaller;color:#373737;">(£@item.Course.Fees)</label>
                            </td>
                            <td>                                                                                                                                       

                                    <div class="item">
                                        <a href="" class="subitem">Detail</a>
                                    </div>

                                    <div class="statusRollup">
                                       @item.Course.Name
                                       Start Date:  @item.Course.StartDate
                                       End Date : @item.Course.EndDate 
                                       Category:  @item.Course.Category
                                       Location: @item.Course.Location
                                       Fees: £ @item.Course.Fees
                                       Total Space: @item.Course.TotalSpace 
                                       Description: @item.Course.Description
                                    </div>

                            </td>
                        </tr>
                    </table>                                                                
                }
                </div>

<div>
    <input type="submit" name="submit" value="Proceed"/>
</div>
 }
</form>


<script type="text/javascript">

function select(sel)
{
    var value = sel.options[sel.selectedIndex].value;        

    if (value == 'Family') {

        document.getElementById('mybox').style.display = "block";
    }
    else {
        document.getElementById('mybox').style.display = "none";
    }        
}

 </script>

 <script>
$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            return $(this).prop('title');
        }
    }
});

$('.subitem').each(function () {
    // Get the contents of the next element with class=statusRollup
    var status = $(this).closest('.item').next('.statusRollup').html();
    $('.subitem').attr('title', status);
});
$('.statusRollup').remove();

 </script>

Answer 1

问题在于这行代码

$('.subitem').attr('title', $('.statusRollup').remove().html())

.html() 获取匹配元素集中第一个元素的HTML内容，因此您要在第一个<div class="statusRollup">内分配内容使用class=".subitem"

的所有元素

尝试

$('.subitem').each(function() {
  // Get the contents of the next element with class=statusRollup
  var status = $(this).closest('.item').next('.statusRollup').html();
  $(this).attr('title', status);
});
$('.statusRollup').remove();

显示自定义内容中每条记录的jquery工具提示

1 个答案: