1

.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のクラスで、最初に返される関数の class に置き換えられ.icon-doc-textます。

手がかりはありますか？

UPDATE 01:以前のクラスを保存する必要があるかもしれないと思うので、mouseleave の .icon-popup を mouseenter の前にあったものに置き換えることができます。

ここをいじった

UPDATE 02:さらに良いのは、データ属性.data()を使用して、元のクラス名を取得することですmouseleave

4

1 に答える 1

1

これは、 toggleClassを使用して、次のように追加の要件を 1 つのセレクターに組み合わせることで、はるかに短時間で実行できます。

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

デモ- 組み合わせたセレクターとtoggleClass

tdまたは、全体に影響を与えたい場合は、さらにclose()を使用します。これは次のようになります。

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

デモ-要素closest()に適用するためにtd

これは、単一のクラスをすべての要素iまたはtd影響を受ける要素に割り当てると、さらに改善される可能性があります。そうすれば、次のようなものを書くことができます。

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

編集

しかし、ホバー時にクラスを交換/交換してから交換する必要があります。

HTML に影響を与えることができる場合は、a を使用してdata-attribute簡単なソリューションを作成できます。属性には複数のクラスを指定できるため、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");
});

デモ- データ属性を使用して切り替えるクラスを指定する

スペースで区切られたいくつかのクラスをデータ属性に追加できるため、これも非常に拡張可能であり、引き続き機能するはずです。

于 2013-03-09T12:33:07.907 に答える