Question

我需要使用label类访问div类。正在将鼠标置于<label class="name"> <div class="hidden">之上。请注意<li>和<div> ID始终是unqiue

HTML

     <li id="132" class="main" ><label class="name">Ajay</label>   
    <div class="hidden" id="132" >
       <p>Some Msg!!<p>
    </div>
    </li>

    <li id="192"  class="main"> <label class="name">Raj</label>    
    <div class="hidden" id="192" >
       <p>Some Msg!!<p>
    </div>
    </li>

    <li id="231"  class="main" ><label class="name">David</label>    
    <div class="hidden" id="231" >
       <p>Some Msg!!<p>
    </div>
    </li>

   So on...

Jquery的

    $('.name').hovercard({detailsHTML:$('.hidden').html()}) 
// on placing mouse on label <div class="hidden"> is called

请帮帮我

Answer 1

您的标记无效，并且您的描述与您尝试执行的代码不符。我猜这里的标记应该是这样的：

<li id="132" class="main"><label class="name">Ajay</label>
<div class="hidden" id="132" >
   <p>Some Msg!!<p>
</div>
</li>

如果是这样，如果您尝试在hovercard元素上调用label.name并包含来自div.hidden附近的信息，您需要这样的内容：

 $(".name").each(function() {
    var $this = $(this);
    $this.hovercard({detailsHTML:$this.nextAll("div.hidden").html()});
 });

...因为div和label不在父/子关系中，所以他们是兄弟姐妹。没有循环就不能这样做，因为我们需要导航。

另请注意，在id和label上使用相同的div值无效。 id值必须在页面上是唯一的。另请注意，以valid in HTML5开头的id值为invalid in HTML4 and earlier，但它们为invalid in CSS，而且为{{3}}。当你使用jQuery时，这意味着你可能会使用很多CSS选择器来与你的结构进行交互。由于CSS中的全数字id值无效，因此它们在CSS选择器中无效，您最终会给自己带来麻烦。

Answer 2

正如T.J所说，你的标记无效。使用正确的标记，您只需使用HTML和CSS即可实现此目的。

这样的事情：

<强> HTML

<li id="231"  class="main">
   <label class="name">David</label>
   <div class="hidden" id="231" >
      <p>Some Msg!!<p>
   </div>
</li>

<强> CSS

div.hidden {
   display: none;
}
li.main:hover div.hidden {
   display: block;
}

示例： http://jsfiddle.net/MWbS4/

如何在Jquery中使用label类获取div类

2 个答案: