Jquery mvc2、查询和qtip问题

我遇到一个问题，在控制器中，我在集合中设置值并将其存储在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> ...

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

对于其中一个，您的外部c#循环'foreach（pList中的var pil）{'将可能多次重新创建相同的'/>
'元素

javascript

var personInfo=$（'#cbPersonInfo'）.val（）

选择（并重复重新选择相同的元素，因此所有悬停都使用相同的工具提示，在本例中为

pil.Text

如果为多个元素分配了相同的ID，则使用该ID的查询将只选择DOM中第一个匹配的元素。（）

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

编辑：解决方案（）的快速链接。今天晚些时候将更新可能的解决方案

<% 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>

$（文档）.ready（函数（）{
$（'[qTip]'）。每个（函数（）{//查找具有qTip属性（标签）的所有元素
var personInfo=$（this.attr（'qTip'）；
$（此）.qtip({
内容：personInfo，
显示：“鼠标悬停”，
隐藏：“鼠标出”，
位置：{目标：'鼠标'}
}); 
});
});

foreach：

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

id=“cbPerson”type=“checkbox”value=”“/>
id=“cbPersonInfo”type=“hidden”value=”“/>

意味着您拥有多次相同的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>
    <%

%>


@hersh-你能澄清一下你希望qtip工作的元素吗？或者你期望最终结果是什么吗？我相信这只是我的jquery给了我问题。我尝试切换我的循环，再次，相同的结果，意味着每个复选框+标签显示正确的信息。我希望qtip做的是显示每个标签的描述。下面是一个示例ff在fb中为我呈现的示例。“列表框输入--复选框”…“标签--当我将鼠标悬停在上面时，应该显示说明”…“输入--包含说明的隐藏类型"。同样，与第一个复选框/标签关联的第一个描述显示了所有这些。谢谢Nealv，但现在工具提示太远了。有没有办法将鼠标悬停在标签上，而提示就在标签上方。现在，我想既然所有内容都放在div中，工具提示就会显示在div的末尾。我不想调整宽度因为某些人的职业比其他人长，所以将div的宽度改为固定宽度。你能将该页面联机吗？我会修复cssNealv，我已经解决了。我已将你拥有的替换为…$（this）。qtip（{…）和“$（this）。find（'label'）。qtip（{”…再次感谢您的帮助，并感谢您为我节省了大量时间。@hersh非常欢迎：）如果您发布新问题，请向我发送消息：）我喜欢jquery
  %>
    <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>