Как я могу изменить CSS внутри вложенной функции JQuery - PullRequest
Новая
       3

Как я могу изменить CSS внутри вложенной функции JQuery

0 голосов
/ 07 августа 2011

Я пытаюсь создать элемент, который, когда курсор мыши находится над изображением, меняется, и его положение корректируется соответствующим образом.Однако изображение меняется, но позиция 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;
}

Вы видите, где я иду не так и почему?

Ответы [ 3 ]

0 голосов
/ 07 августа 2011

Вы позиционировали элемент newComment absolute?Вы не можете использовать верх и лево, если элемент расположен static.

Если вы этого не сделали, попробуйте это вместо вашего текущего .css: 

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

Поway: вам не нужно передавать имя свойства css в виде строки, когда вы пишете в DOM как.Так что это должно работать точно так же: 

.css({
     top: (yOffset * 100) + 175 + "px",
     left: (xOffset * 75) + 40 + "px",
     position: 'absolute'
})
0 голосов
/ 07 августа 2011

удалить «px» в конце параметра объекта смещения;) 

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

Если метод смещения не распознает свойства left и top как число, он необновить позицию элемента.

0 голосов
/ 07 августа 2011

Был ли добавлен диапазон 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 () без параметров, переданных.Он говорит, что вам нужен один или несколько классов.

Кроме того, метод offset () не нуждается в единицах измерения, если используются единицы измерения px.

Возможно, вы также захотите взглянуть на toggleClass ("a", "b") , что облегчает обмен двух классов.

...