首页 > 解决方案 > 在 jQuery 中使用 hover() 和 each()?

问题描述

我有一个表,其中包含一个带有偶数 tds 的单行。其中一半从列表数据中删除,另一半用于添加到列表数据。

所以我的剃刀观点中的结构有点像

<table class="table table-bordered table-hover dataTable" 
       role="grid" aria-describedby="example2_info">
    <tbody>
        @{int j = 0;}
        @foreach (var i in item.Data)
        {
            { j++; }
            <tr role="row" class="odd">
                <td class="sorting_1 remove-from-list_@j" style="word-break:break-all;">
                ...
                <td class="add-from-list_@j">
            ...

所以每个类都得到动态的名称。

我的 jQuery 函数如下:-

<script type="text/javascript">
    $(document).ready(function () {

        $(".table.table-bordered.table-hover.dataTable td.add-from-list")
           .not(':first').each(
            function (i) {
                $(".add-from-list_" + i).hover(function () {
                    $(this).css("background", "#fff2cc");
                })
            },
            function (i) {
                $(".add-from-list_" + i ).css("background", "");

            });
        $(".table.table-bordered.table-hover.dataTable td.remove-from-list").each(
            function (i) {
                $(".remove-from-list_" + i).hover(function () {
                    css("background", "#fff2cc");
                })
            },
            function (i) {
                $(".remove-from-list_" + i).css("background", "");
            });

它不工作。

标签: jquery

解决方案


你真的应该为悬停效果使用 CSS !!!

td[class^="add-from-list_"]:hover,
td[class^="remove-from-list_"]:hover{
    background: #fff2cc;
}

'^' 表示类以引号之间的字符串开头。


推荐阅读