자바 스크립트로 클래스 호출 - 아무 일도하지 않습니다.

Question

저는 자바 스크립트로 별 등급 시스템에 불을 붙이고 있습니다. PHP 페이지 내에서 클래스 이름에 액세스하려고합니다. 이상적으로 마우스 오버시 별 모양이 바뀌어야하지만, 그럴 때 아무 일도 일어나지 않습니다.

jQuery를 :

$(document).ready(function() { 
    // put all your jQuery goodness in here. 



          $(function(){ 
       $('.star').mouseover(function(){ 
        var star = $(this).index() 1; 
        $(this).parent().css("background-position","0 -" (32 * star) "px"); 
       }); 

       $('.star-rating').mouseout(function(){ 
        var originalresult = $(this).attr('id').split('result')[1]; 
        $(this).css("background-position","0 -" (32 * originalresult) "px"); 
       }); 
      });​ 
}); 

HTML :

<div class="star-rating" id="rating1result0"> 
    <div class="star"></div> 
    <div class="star"></div> 
    <div class="star"></div> 
    <div class="star"></div> 
    <div class="star"></div> 
</div> 
<div class="result"> 
    <span style="color:green">0</span> (0) 
</div> 

Answer 1

http://jsfiddle.net/2p98h/1/

이보십시오, 당신이했던 일부 구문 오류. 배경 없이는 테스트하기가 어렵습니다. 필요한 경우 개정판을 작성하십시오.

Answer 2

jquery로 CSS를 업데이트 할 때 background-position 대신 backgroundPosition을 사용하십시오. 모든 css 명령에 적용됩니다.

Answer 3

$('.star').mouseover(function(){ 
      var star = $(this).index() 1; 
      $(this).parent().css("backgroundPosition","0 -" + (32 * star) + "px"); 
      }); 

      $('.star-rating').mouseout(function(){ 
      var originalresult = $(this).attr('id').split('result')[1]; 
      $(this).css("backgroundPosition","0 -" + (32 * originalresult) + "px"); 
      }); 

문자열을 작성할 때 '+'를 추가해야하며 배경 위치는 backgroundPosition이어야합니다.

Answer 4

피들을보고 이미지가있는 CSS를 추가 한 후 예상대로 작동했습니다. 나는 당신이 어떤 이유로 서버 측을 추가하려고 할 때주의를 기울였다. 필자가 바이올린에서 메모장으로 복사하고 붙여 넣은 다음 여분의 공백이나 문자가없는 것으로 보이는 내 문서에 추가 문자를 계속 가져 왔지만 서버에서 나는 jquery 코드 끝에 3 여분의 문자를 얻고 있었다. 나는 서버에서 파일을 편집하여 3 개의 여분의 문자를 제거하고 바이올린에 제공된 코드를 사용하여 훌륭하게 작동했습니다. 어쩌면 내 끝의 버그 일 수도 있지만 어쩌면 당신의 경험 일 것입니다.

http://jsfiddle.net/eviljackson/rwK3w/ -가이 스레드에 포함 있도록 예를 들어 귀하의 게시물을 내 끝에 문제를 알아낼 도움으로이 당신을 도와줍니다

희망을 작업하는 새로운 바이올린이 좋은 사람은 ... CSS는 다음과 같습니다

css

.star-rating { 
    width:80px; 
    height:16px; 
    float:left; 
    background:url(http://i39.tinypic.com/2cntjsl.png); 
    cursor:pointer; 
    } 
    .star { 
    width:16px; 
    height:16px; 
    float:left; 
    } 
    .result { 
    float:left; 
    height:16px; 
    color:#454545; 
    margin-left:5px; 
    line-height:110%; 
    }