Question

我在我的脚本中使用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”的行

我做错了什么建议？

提前致谢

Answer 1

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

这个

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

应该是：

if($('tr').hasClass('group'))

Answer 2

在.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语句。

Answer 3

没有ID为tr

的元素

你可能想要：

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

Answer 4

而不是：

$(this.cells[0])

使用：

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

同样改变：

$('#tr')

要：

$('tr')

Answer 5

更改

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

到

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

因为你已经迭代了一个trs列表。

为什么我的代码使用jQuery hasClass（）不起作用？

5 个答案: