代码之家  ›  专栏  ›  技术社区  ›  leora Matt Lacey

选择td内的元素

  •  0
  • leora Matt Lacey  · 技术社区  · 14 年前

    我有以下jquery代码来突出显示表单元格。

    这是我的HTML:

    <table>
       <tr>
            <td class="day">
                 <span class='hiddenImage'><img src='/images/test.png' /></span>
            </td>
            <td class="day"><span class='hiddenImage'><img src='/images/test.png' /></span>
            </td>
       </tr>
    </table>
    

    这是我的jquery代码

    $("td").hover(
        function () {
              [show image]
        },
        function () {
              [hide image]
        }
    );
    

    在表格单元格中,我有一个隐藏的 <span> 类名 hiddenImage . 当我将鼠标悬停在TD单元上时,如何显示图像?

    在函数内部类似这样的东西(但下面似乎不起作用)

     $(this '.hiddenImage').show();
    
    1 回复  |  直到 7 年前
        1
  •  3
  •   Nick Craver    14 年前

    我会在CSS中使用一个规则 .hover 您已经在使用的类,如下所示:

    td.hover .hiddenImage { display: inline-block; }
    

    那么您的jquery也更简单:

    $("td").hover(function() {
      $(this).toggleClass("hover");
    });
    

    或者,如果您不关心IE6,那么只需在CSS中完全执行(完全没有脚本):

    td:hover { ...styling... }
    td:hover .hiddenImage { display: inline-block; }
    

    或者如果你 必须 在jquery中(尽管它是多余的),使用 .find() 要在中获取元素,请执行以下操作:

    $("td").hover(function () {
      $(this).toggleClass("hover").find(".hiddenImage").toggle();
    });