評分系統不能正常工作

-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

這很好，但我猜下一步是讓用戶點擊第一，第二，...明星，然後調用服務器來保存投票... 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

試過這個代碼.. did not似乎爲我工作/ ..我已經鏈接文件...但它似乎不工作！ – Sohil

評分系統不能正常工作

回答

相關問題