我如何使用JavaScript進行5星級評分

正在嘗試使用html5和css獲得5星級評分。我如何使用JavaScript進行5星級評分

我所做的是，我拍攝了2張圖片，一張是紅色和綠色的星星。

初始時星星會變紅，當我們點擊星星評分時，直到被點擊的星星變成綠色。

所以我用的onclick改變形象...

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function changeImage() 
{ 
element=document.getElementById('myimage') 
if (element.src.match("bulbon")) 
    { 
    element.src="images/1.png"; 
    } 
else 
    { 
    element.src="images/2.png"; 
    } 
} 
</script> 


</head> 
<body> 
<img id="myimage" onclick="changeImage()"src="images/1.png"> 
<img id="myimage" onclick="changeImage()"src="images/1.png"> 
<img id="myimage" onclick="changeImage()"src="images/1.png"> 
<img id="myimage" onclick="changeImage()"src="images/1.png"> 
<img id="myimage" onclick="changeImage()"src="images/1.png"> 



</body> 
</html>

什麼，我現在需要的是，當我點擊等級的星星，只有第一個明星得到改變。直到我點擊的明星應該得到顏色改變...

我該怎麼做？

來源

2013-10-11 MintY

- ID是一個獨特的屬性，並且不能以這種方式被使用，使用類，而不是 –

因爲這並沒有任何關係做帆布，請刪除畫布標籤。儘管你可以，你也沒有使用jQuery。 –

首先使用jQuery來連接你的事件，使用on屬性是非常過時的。其次，你有重複的id屬性，這是無效的。最後，您可以使用prevAll()獲取所有前面的元素並更新它們。試試這個：

<div class="rating-container"> 
    <img class="star" src="images/1.png"> 
    <img class="star" src="images/1.png"> 
    <img class="star" src="images/1.png"> 
    <img class="star" src="images/1.png"> 
    <img class="star" src="images/1.png"> 
</div>

$(function() { 
    $('.rating-container .star').click(function() { 
     $('.rating-container .star').prop('src', 'images/1.png'); 
     $(this).prevAll('.star').addBack().prop('src', 'images/2.png'); 
    }); 
});

Example fiddle

注意的例子是改變一些div元素的class，因爲我沒有訪問到您的圖片，但道理是一樣的。

來源

2013-10-11 12:41:44

您使用的是哪個版本的jquery庫？ – MintY

@Pandora 1.9，儘管回到1.7應該沒問題。如果你使用<1.7將'prop'改爲'attr'。 –

@BillyChan'on'事件屬性最初是HTML 4的一部分。它們使用起來非常笨重，並且是令人難以置信的關注分離。它們不會被棄用（主要是因爲HTML5盡力而爲不會破壞遺留代碼），但它們應該是IMO。 –

我最後的方法是使用一個「明星面具」 png圖片下的星星是透明的，該容器的後面那裏有一個div動畫的點按百分比表示，我likethe效果UND你有非常精確的量

function updateStars() {//Animatestars in Searchresult 
    $('.stars').each(function (i){ 
     var el = $(this).find('.countSpan').text(); 
     var amount = (parseFloat(el) * 2) * 10 ; 
     $('.Newstar_bar').eq(i).animate({'width': amount+'%'},1000,'easeOutQuint'); 
       console.log('updatedStars with amount : '+amount); 
    }); 
}

HTML：您正在使用您的所有圖像都是相同的ID

<div class="stars" > 
    <div class="Newstar_container" style="top:-5px;"> 
    <div class="Newstar_background"></div> 
    <div class="Newstar_bar"></div> 
    <div class="Newstar_wrap"></div> 
</div> 
<span class="countSpan" style="display:none">2.3</span> 
</div>

來源

2013-10-11 12:48:01

我如何使用JavaScript進行5星級評分

回答

相關問題