jquery - 如何在嵌套的 jQuery 函数中更改 css

Question

我正在尝试创建一个元素，当鼠标悬停在其上时，它的图像会发生变化，并且它的位置也会相应地进行调整。然而图像在改变，但 css 位置没有改变。

jQuery/JavaScript:

        var newComment = $('<span>').attr({'id': commentCount}); 
        newComment
            .addClass('comment')  
            .css({
                'top': (yOffset * 100) + 175 + "px",
                'left': (xOffset * 75) + 40 + "px"
            })

            .hover(function(){ //Hover over the comment                       
                newComment

                .removeClass()
                .addClass('commentOver')
                .offset({
                    'top': yOffsets[newComment.id] + 175 - 1250 + "px",
                    'left': xOffsets[newComment.id] + 40 - 1500 + "px"
                });

            },function(){ //Mouse leaves the comment               
                newComment    

                .removeClass()
                .addClass('comment')
                .offset({
                    'top': yOffsets[newComment.id] + 1750 + "px",
                    'left': xOffsets[newComment.id] + 400 + "px" 
                });                      
            });      

CSS:

.comment{
    position: absolute;
    z-index: 10;
    padding: 0px;
    width: 51px;
    height: 70px;
    background-image: url('../img/dropSmall.png');
    font-weight:800;
}

你能看出我哪里错了吗？为什么？

Answer 1

是否已将新的评论范围添加到文档中？

由于我们没有您的其余 HTML/CSS/代码，我不知道这些是否是唯一的问题，但我建议使用 $(this) 并在 removeClass() 中传递一个参数:

    var newComment = $('<span>').attr({'id': commentCount}); 
    newComment
        .addClass('comment')  
        .css({
            'top': (yOffset * 100) + 175 + "px",
            'left': (xOffset * 75) + 40 + "px"
        })

        .hover(function(){ //Hover over the comment                       
            $(this)
            .removeClass("comment")
            .addClass('commentOver')
            .offset({
                'top': yOffsets[newComment.id] + 175 - 1250,
                'left': xOffsets[newComment.id] + 40 - 1500
            });

        },function(){ //Mouse leaves the comment               
            $(this)
            .removeClass("commentOver")
            .addClass('comment')
            .offset({
                'top': yOffsets[newComment.id] + 1750,
                'left': xOffsets[newComment.id] + 400" 
            });                      
        });   

我在 jQuery 文档中没有看到您可以在不传递任何参数的情况下调用 removeClass()。它说您需要一个或多个类(class)。

此外，如果单位是 px，offset() 方法不需要单位。

您可能还想看看 toggleClass("a", "b") ，这使得交换两个类变得容易。