등급 시스템 작동하지 않음

-1

<link rel="stylesheet" type="text/css" href="style.css"> 
<link type="text/javascript" src="jquery-1.10.2.min.js"> 
<link type="text/javascript" src="jquery-latest.min.js"> 
<body> 

<div class="rating_box"> 
<div class="star1 rating_stars"></div> 
<div class="total votes">Votes</div> 
</body> 
</html> 
<script> 
$('.ratings_stars').hover(
    // Handles the mouseover 
    function() { 
     $(this).prevAll().andSelf().addClass('ratings_over'); 
     $(this).nextAll().removeClass('ratings_vote'); 
    }, 
    // Handles the mouseout 
    function() { 
     $(this).prevAll().andSelf().removeClass('ratings_over'); 
     set_votes($(this).parent()); 
    } 
); 

</script>

왜 마우스를 가리키면이 기능이 작동하지 않습니까? 이미지가 바뀌지 않아? 코드에 문제가 있습니까? 내 CSS 스타일이등급 시스템 작동하지 않음

.rating_stars 
{ 
    background:url('star_empty.png') no-repeat; 
    height:20px; 
    width:20px; 
    padding:2px; 
    float:left; 
    } 
.ratings_vote 
{ 
background:url('starfull.png') no-repeat; 

}

출처

2014-01-05 Sohil

왜 JS를 사용하나요? 사용자': hover' CSS 요소가 더 쉬울 것입니다. – Guicara

내 업데이트 된 답변 (아래)을 참조하십시오 – Guicara

왜 그것을 위해 JS를 사용할 수 있습니까? 사용자가 더 쉬울 것입니다 :hover CSS 요소.

HTML

<link rel="stylesheet" type="text/css" href="style.css"> 
<link type="text/javascript" src="jquery-1.10.2.min.js"> 
<link type="text/javascript" src="jquery-latest.min.js"> 

<body> 

<div class="rating_box"> 
    <div class="star1 rating_stars"></div> 
    <div class="total votes">Votes</div> 
</div> 

</body> 
</html>

CSS

.rating_stars { 
    background:url('star_empty.png') no-repeat; 
    height:20px; 
    width:20px; 
    padding:2px; 
    float:left; 
} 

.rating_stars:hover { 
    background:url('starfull.png') no-repeat; 
}

업데이트 답 :

HTML

<div class="rating_box"> 
    <a id="star1" class="rating_stars"></a> 
    <a id="star2" class="rating_stars"></a> 
    <a id="star3"></a> 
    <a id="star4"></a> 
    <a id="star5"></a> 
    <div class="total votes">Votes</div> 
</div>

CSS

.rating_box a { 
    float:left; 
    padding:2px; 
    height:20px; 
    width:20px; 
    background:url('star_empty.png') no-repeat; 
} 

.rating_stars { background: url('starfull.png') no-repeat; }

jQuery를

$(document).ready(function() { 
    $('.rating_box a').click(function() { 
     if (!$(this).hasClass("rating_stars")) { 
      $(this).addClass("rating_stars"); 

      // Make the AJAX call 
      $.ajax({ 
       ... 
      }); 
     } 
    }); 
});

그것은 완벽 하진 및 완료되지하지만 사용할 수있는 무언가의 시작이 될 수 있습니다 (내 생각) .

출처

2014-01-05 12:09:58 Guicara

멋지긴하지만 다음 단계는 사용자가 1, 2, ... 스타를 클릭 한 다음 서버를 호출하여 투표를 저장하도록하는 것입니다. JS가 필요할 것이므로 JS로 위젯을 보냅니다. Nop? – farvilain

이미 jQuery를 사용하고 있으므로 다음 단계는 ajax를 빌드하여 서버에 전송하는 것입니다. $ .ajax를 사용하십시오. http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php – Faron

#Faron 나는 별 위로 마우스를 가져 가면 이미지가 바뀌어야합니다. CSS에서 정의 된 이미지 높이가 그걸로 무엇이든해야합니까 ?? – Sohil

은 테스트되지 않은 상태입니다 도움이되지만 HTML 코드에 따르면, JS는해야하십시오

$('.ratings_stars').hover(
    // Handles the mouseover 
    function() { 
     $(this).removeClass('ratings_vote').addClass('ratings_over'); 
    }, 
    // Handles the mouseout 
    function() { 
     $(this).removeClass('ratings_over').addClass('ratings_vote'); 
    } 
);

출처

2014-01-05 12:04:33 sdespont

그 코드를 시도해보십시오 .. 나에게 효과가없는 것 같아요/.. 파일을 연결했지만 ... 작동하지 않는 것 같습니다 !! – Sohil

등급 시스템 작동하지 않음

답변

관련 문제