중첩 된 jQuery 함수 내에서 CSS를 어떻게 바꿀 수 있습니까?

Question

마우스를 이미지가 바뀌고 그에 따라 위치가 조정되면 요소를 만들려고합니다. 그러나 이미지가 바뀌고 있지만 CSS 위치는 바뀌지 않습니다.

jQuery를/자바 스크립트 :

 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" 
      });      
     }); 

매개 변수없이 removeClass()를 호출 할 수있는 jQuery 설명서에는 표시되지 않습니다. 하나 이상의 수업이 필요하다고합니다.

또한 offset() 메서드는 단위가 px 인 경우 단위를 필요로하지 않습니다.

두 개의 클래스를 쉽게 바꿀 수있는 toggleClass("a", "b")을보고 싶을 수도 있습니다.

Answer 2

요소를 배치 했습니까 newCommentabsolute? 요소가 static 인 경우 위쪽 및 왼쪽을 사용할 수 없습니다.

대신 당신이 시도하지 않은 경우 현재 .css : 그런데

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

: 당신이 쓸 때, 문자열로 CSS 속성의 이름을 통과 할 필요는 없습니다 DOM이 좋아. 그래서 이것은 단지 같은 작동합니다 :

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

Answer 3

오프셋 개체 매개 변수의 끝에있는 "픽셀"을 제거)

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

를 오프셋 방법으로 left 및 top 속성을 인식하지 못하는 경우 번호를 지정하면 요소 위치가 업데이트되지 않습니다.