mvc2、查询和qtip问题

Question

我遇到一个问题，在我的控制器中，我在集合中设置值并将它们存储在 ViewData 中。例如：

ViewData["ex1"] = new SelectList(ex1); // a simple collection
ViewData["ex2"] = new SelectList(group.Members, "Id", "Gender");

我将这些传递给我的视图并像这样循环。例如：

<div id="divListBox" style="overflow:auto; border:1px solid #CCCCCC; padding-left:5px; background-color:white; height: 130px"> 

          <%
            var list = this.ViewData["e2x"] as SelectList;
            var pList = this.ViewData["ex1"] as SelectList;

            foreach (var p in list)
            {
                foreach (var pil in pList)
                  {
                    if(pil.Text.Contains(p.Value)) // ex1 does contains ex2
                    {
                       %>
                        <input id="cbPerson" type="checkbox" value="<%= p.Value %>" />
                        <label for="cbPerson"><%= p.Text %></label>
                        <input id="cbPersonInfo" type="hidden" value="<%= pil.Text %>" /><br />  
                       <%
                    }
                  }
            }
          %>
        </div> ...

这是我的 jQuery。例如：

$('#divListBox > input').each(function() {
        var personInfo = $('#cbPersonInfo').val();
        $(this).append($('personInfo'));
            $('*').qtip('hide');
            $('#divListBox label').each(function() {
                $(this).qtip({
                    content: personInfo,
                    show: 'mouseover',
                    hide: 'mouseout',
                    style: {
                        classes: 'ui-tooltip-custom',
                        tip: true
                    },
                    position: {
                        my: 'left bottom',
                        at: 'top right'
                    }
                });
            });
        });

如果我将输入类型“隐藏”设置为“文本”，我会看到每一项的正确信息。然而，当我将鼠标悬停在它们上方时，第一个信息显示为所有这些信息的工具提示。我认为这可能是我的jquery，但我不太确定。我已经处理这个问题几个小时了，但仍然一无所获。有人可以帮忙吗？

Answer 1

foreach：

id="cbPerson" type="checkbox" value="<%= p.Value %>" />
<label for="cbPerson"><%= p.Text %></label>
id="cbPersonInfo" type="hidden" value="<%= pil.Text %>" /><br />

意味着您有多次相同的ID（ID始终是唯一的），因此当您对ID进行jquery选择时，Jquery会选择它找到的第一个ID，

如果您将人包装在容器中，那就更容易了。

我为您做了一个快速调整，我对此进行了测试和工作。

  %>
    <div class="person">
     <input id="cbPerson" type="checkbox" value="<%= p.Value %>" />
     <label for="cbPerson"><%= p.Text %></label>
     <input id="cbPersonInfo" type="hidden" value="<%= pil.Text %>" /><br />  
    </div>
    <%

---

<script type="text/javascript">
// for each container with class person
    $('.person').each(function () {
    //find the input with class cbPersonInfo which is !!!! IN !!!! $(this): $(this) is now the container 
        var personInfo = $(this).find(".cbPersonInfo").val();
        $(this).qtip({
            content: personInfo,
            show: 'mouseover',
            hide: 'mouseout',
            style: {
                classes: 'ui-tooltip-custom',
                tip: true
            },
            position: {
                my: 'left bottom',
                at: 'top right'
            }
        });
    });


</script>

这段代码的意思是：对于每个带有 person 类的 div，找到带有 cbPeronInfo 类的 div 并使用它的值作为 qtip。 （当然，将 qtip 挂接到该类）

---

@Edit

实际上，出于语义原因，最好使用 UL 而不是（更多逻辑），但我假设您可以自己弄清楚如何更改它？如果你想以其他方式给我一个信号:)

Answer 2

对于一个外部 C# 循环 'foreach (var pil in pList){' 可能会多次重新创建相同的 '" />
' 元素。

javascript var personInfo = $('#cbPersonInfo'). val(); 选择（并重复重新选择相同的元素，因此所有悬停的工具提示相同，在本例中为 pil.Text

如果多个元素被分配了相同的 ID，则使用该 ID 的查询将仅选择 DOM 中第一个匹配的元素。 (http://is.gd/dM4EG)

确保页面中的所有 html 元素都具有唯一的 ID。

编辑：解决方案的快速链接（http://craigsworks.com/projects/qtip_new/forum/take-tooltip-content-from-the-element-attributes-t-8.html) 。今天晚些时候将更新可能的解决方案。

<% foreach (var qt in Model)
{%>
    <input id="cbPerson" type="checkbox" value="<%= qt.Value %>" />
    <label for="cbPerson" qTip="<%=qt.Text  %>"><%= qt.Text %></label>
    <input id="cbPersonInfo" type="hidden" value="<%= qt.Text %>" /><br />
<%} %>

<script type="text/javascript">
    $(document).ready(function () {
        $('[qTip]').each(function () { // Find all elements that have the qTip attribute (labels)
            var personInfo = $(this).attr('qTip');
            $(this).qtip({
                content: personInfo ,
                show: 'mouseover',
                hide: 'mouseout',
                position: { target: 'mouse' }
            }); 
        });
    });
</script>