如何更改嵌套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

newComment范圍是否已添加到文檔中？

由於我們沒有剩下的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（）的情況。 它說您需要一個或多個課程。

另外，如果單位是px，則offset（）方法不需要單位。

您可能還想看看toggleClass（“ a”，“ b”） ，這使得交換兩個類變得容易。

Answer 2

您是否將元素newComment定位為absolute ？ 如果元素定位為static則不能使用top和left。

如果沒有，請嘗試使用此方法，而不要使用當前的.css ：

.css({
      'top': (yOffset * 100) + 175 + "px",
      'left': (xOffset * 75) + 40 + "px",
      'position': 'absolute'
})

順便說一句：使用DOM編寫時，不必將css屬性的名稱作為字符串傳遞。 因此，這應該是一樣的：

.css({
     top: (yOffset * 100) + 175 + "px",
     left: (xOffset * 75) + 40 + "px",
     position: 'absolute'
})

Answer 3

刪除偏移量對象參數末尾的“ px”；）

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

如果offset方法無法將left和top屬性識別為數字，則不會更新元素位置。