具有重复 ID 的 JQuery 鼠标悬停答案

【问题标题】：JQuery mouseover with duplicate id具有重复 ID 的 JQuery 鼠标悬停
【发布时间】：2013-06-04 06:05:28
【问题描述】：

我有这个代码

<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript"> 
 $(document).ready(function(){ 

$("#tiros").mouseover(function() { $("#hello").css('display',''); });
$("#hello").mouseover(function() { $("#hello").css('display',''); });
$("#hello").mouseout(function() { $("#hello").css('display','NONE'); });
 });
</script>

<link href="../css/tablas.css" rel="stylesheet" type="text/css" />
</head>

<body >
<div align="center">
    <style type="text/css"> 
td {
    vertical-align: top;
}
</style>

  <table id="tablas"  border="0">
    <caption id="titulo"> DISTRIBUCION DE MAQUINA SM74    <tr>
      <td><table  id="tablas" border="1">
        <tr>
          <td id="cabezera">07-06-2013</td>
          </tr>
                <tr>
          <td> <div align="right" id="tiros">20000</div>
           <div id="hello" style="display:NONE;position:absolute; z-index:1; ">
        <ul>
      <li id="Subtitulo">Nº OT: 19178</li>
      <li id="Subtitulo">Tipo: P</li>
      <li id="Subtitulo">Sucursal: ANTOFAGASTA</li>
      <li id="Subtitulo">Detalle: PEGABLE</li>
      <li id="Subtitulo">Cliente: ASOC. I</li>
    </ul>
    </div></td>
          </tr>
              </table></td>
      <td><table  id="tablas" border="1">
        <tr>
          <td id="cabezera">08-06-2013</td>
          </tr>
               <tr>
          <td> <div align="right" id="tiros">20000</div>
           <div id="hello" style="display:none; position:absolute; z-index:1;">
        <ul>
      <li>Nº OT: 19178</li>
      <li>Tipo: P</li>
      <li>Sucursal: ANTOFAGASTA</li>
      <li>Detalle: PEGABLE</li>
      <li>Cliente: ASOC. I</li>
    </ul>
    </div></td>
          </tr>
                </table>
      </td>
      <td><table  id="tablas" border="1">
        <tr>
          <td id="cabezera">09-06-2013</td>
          </tr>
              </table></td>
      <td><table id="tablas"  border="1">
        <tr>
          <td id="cabezera">10-06-2013</td>
          </tr>
              </table></td>
      <td><table  id="tablas" border="1">
        <tr>
          <td id="cabezera">11-06-2013</td>
          </tr>
              </table></td>
    </tr>
  </table>
</div>
</body>
</html>

当我将鼠标放在 div 上时，第一个 div 有效而另一个无效，id 的值对于所有 de div 都是“tiros”，我使用函数 mouseover 调用并且仅在第一次潜水。很抱歉，我的英语很糟糕 :)

【问题讨论】：

ID 应该是唯一的。请查看相关的 HTML 规范部分 - w3.org/TR/html401/struct/global.html#h-7.5.2
您不应重复 ID 属性。阅读更多stackoverflow.com/questions/6321702/…
你最好使用类，然后继续使用 toggleClass()。
这是一个 php 印象，mysql_fetch_array 中的 While 循环..

标签： jquery mouseover

【解决方案1】：

将具有多个相同值的id 标记更改为一个类。然后将 jQuery 函数中的选择器更改为 . 而不是 #。

所以它将是 $(".tiros").mouseover(function() { $(".hello").css('display',''); }); 而不是 $("#tiros").mouseover(function() { $("#hello").css('display',''); });，并且您可以对其他调用具有多个实例的 id 的函数进行更改。

【讨论】：