0

我在我的脚本中使用 hasClass 方法，但它没有按我想要的方式工作。我的 HTML 表格看起来像这样

<table id="sort">
            <tr class="nodrag nodrop">
                <td colspan=3><strong><a style="cursor:pointer;" class="toggle">Group 1</a></strong></td>
                <td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
            </tr>
            <tr id="1" class="tr_group" style='display:none;'>
                <td style="width:10px;" class="dragHandle">&nbsp;</td>
                <td><a href=# style="margin-left: 20px;">Umair Iqbal</a></td>
                <td><span style="font-size: 12px; color: #999; line-height: 100%;">A Student at TUM</span></td>
                <td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
            </tr>
            <tr id="2" class="tr_group" style='display:none;'>
                <td style="width:10px;" class="dragHandle">&nbsp;</td>
                <td><a href=# style="margin-left: 20px;">Faryal Khan</a></td>
                <td><span style="font-size: 12px; color: #999; line-height: 100%;">A Doctor at KMC</span></td>
                <td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
            </tr> 
</table>

我的脚本如下

 <script type="text/javascript">
        $(document).ready(function() {
            // $('#sort tr:even').addClass('alt');
            $('#sort').tableDnD({
                onDrop: function(table, row) {
                  alert(row.id);
                },
                dragHandle: ".dragHandle"
            });
            $("#sort tr").hover(function() {
                if($('#tr').hasClass('tr_group')) 
                {
                    $(this.cells[0]).addClass('showDragHandle');
                    }, function() {
                    $(this.cells[0]).removeClass('showDragHandle');
                }
            });
        });
 </script>

它没有将类 showDragHandle 添加到悬停效果具有类“tr_group”的行中

我做错了什么有什么建议吗？

提前致谢

4

5 回答 5

1

您的选择器不正确，您使用哈希来指示和id。此外，您还使用不正确的元素表示法为您的类添加前缀。

这个

if($('#tr').hasClass('tr_group'))

应该：

if($('tr').hasClass('group'))
于 2012-05-30T14:51:24.227 回答
0

代替：

$(this.cells[0])

利用：

$('.dragHandle', $(this))

也改变：

$('#tr')

至：

$('tr')
于 2012-05-30T14:52:45.767 回答
0

改变

if($('#tr').hasClass('tr_group'))

至

if($(this).hasClass('tr_group'))

因为您已经在遍历 trs 列表。

于 2012-05-30T14:53:41.413 回答
0

在 内.hover，您应该问：

if ( $(this).hasClass("tr_group") )

或者您可以仅响应tr具有该类的那些元素：

$("#sort").on({
    mouseenter: function(){
        $("td:first", this).addClass("showDragHandle");
    },
    mouseleave: function(){
        $("td:first", this).removeClass("showDragHandle");
    }
}, "tr.tr_group");

tr当您只能响应您要定位的元素时，无需执行 if 语句。

于 2012-05-30T14:52:01.640 回答
0

没有 ID 为的元素tr

你可能想要：

if ($(this).hasClass('group'))
于 2012-05-30T14:52:10.057 回答