Question

每当我将鼠标悬停在表格行上时，我想用.icon-popup替换（交换）任何元素类。在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。

Fiddled here

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

Answer 1

使用toggleClass并将您的其他要求合并到一个选择器中，您可以做得更短，类似于：

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

DEMO - 使用组合选择器和toggleClass

或者如果您希望影响整个td，请另外使用closest()，类似于：

$(".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");
});

修改

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

如果您可以通过使用data-attribute来影响HTML，那么您可以编写一个很好的简易解决方案。由于class属性可以指定多个类，因此您可以添加一个数据属性，指定要替换的类并使用它，类似于：

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属性指定要切换的类

这也是可扩展的，因为你可以为数据属性添加几个空格分隔的类，它仍然可以工作。

在子元素中悬停时替换不同的类

1 个答案:

修改