1

.icon-popup每当我将鼠标悬停在表格行上时，我都想替换（交换）元素的类。On mouseleave，我希望将初始类交换回来。

<table class="libraryResults">
    <tr>
        <td class="libFormat"> <span><i class="icon-doc-text" data-id="icon-doc-text">a</i></span>  
        </td>
    </tr>
    <tr>
        <td class="libFormat"> <span><i class="icon-video" data-id="icon-video">b</i></span>    
        </td>
    </tr>
    <tr>
        <td class="libFormat"> <span><i class="icon-mic" data-id="icon-mic">c</i></span>    
        </td>
    </tr>
</table>

我成功做到这一点的唯一方法是冗长而繁琐：

$(".libraryResults tr").hover(function () {
    $(this).find(".icon-doc-text").attr('class', 'icon-popup');
}, function () {
    $(this).find(".icon-popup").attr('class', 'icon-doc-text');
});

$(".libraryResults tr").hover(function () {
    $(this).find(".icon-video").attr('class', 'icon-popup');
}, function () {
    $(this).find(".icon-popup").attr('class', 'icon-video');
});

$(".libraryResults tr").hover(function () {
    $(this).find(".icon-mic").attr('class', 'icon-popup');
}, function () {
    $(this).find(".icon-popup").attr('class', 'icon-mic');
});

当然，它并不完全有效。mouseleave所有类都被第一个返回函数的类替换.icon-doc-text。

有什么线索吗？

更新01：我想我可能必须存储它以前的类，这样我就可以用mouseenter之前的任何东西替换mouseleave上的.icon-popup。

在这里摆弄

更新 02：更好的是我可以使用数据属性并.data()检索原始类名mouseleave

4

1 回答 1

1

您可以使用toggleClass将您的附加要求组合到一个选择器中来缩短此时间，类似于以下内容：

$(".libraryResults tr td").hover(function() {
    $(this).find(".icon-doc-text, .icon-video, .icon-mic").toggleClass("icon-popup");
});

DEMO - 使用组合选择器和toggleClass

或者，如果您希望整体td受到影响，请另外使用最接近（），类似于：

$(".libraryResults tr td").hover(function() {
    $(this).find(".icon-doc-text, .icon-video, .icon-mic").closest("td").toggleClass("icon-popup");
});

DEMO -closest()用于应用到完整td元素

如果您将单个类分配给您希望受到影响的所有i或元素，则可以进一步改进。td这样你就可以写出类似这样的东西：

// If class 'myClass' is on all td elements
$(".libraryResults td.myClass").hover(function() {
    $(this).toggleClass("icon-popup");
});

编辑

但是，我需要在悬停时替换/交换类，然后将它们交换回来。

如果您可以影响 HTML，那么通过使用 adata-attribute您可以编写一个不错的速记解决方案。由于该class属性可以指定多个类，因此您可以添加一个 data 属性，指定要换出的类并使用它，类似于：

HTML

<tr>
    <td class="libFormat"> <span><i class="icon-doc-text" data-class-name="icon-doc-text">icon text</i></span>

    </td>
    <td class="libFormat"> <span><i class="icon-video" data-class-name="icon-video">icon video</i></span>

    </td>
    <td class="libFormat"> <span><i class="icon-mic" data-class-name="icon-mic">icon mic</i></span>

    </td>
</tr>

脚本

$(".libraryResults tr td").hover(function () {
    var $match = $(this).find("[data-class-name]");
    var className = $match.attr("data-class-name");

    $match.removeClass(className);
    $match.addClass("icon-popup");
}, function () {
    var $match = $(this).find("[data-class-name]");
    var className = $match.attr("data-class-name");

    $match.addClass(className);
    $match.removeClass("icon-popup");
});

DEMO - 使用 data 属性指定要切换的类

这也是非常可扩展的，因为您可以将几个空格分隔的类添加到 data 属性中，它仍然应该可以工作。

于 2013-03-09T12:33:07.907 回答