1

html5 と css を使用して 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>

今必要なのは、評価のために星をクリックすると、最初の星だけが変更されることです。代わりに、クリックした星の色が変わるまで...

これどうやってするの？？？

4

2 に答える 2

3

まず、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');
    });
});

フィドルの例

この例では、画像にアクセスできないためclass、いくつかの要素を変更していますが、ロジックは同じです。div

于 2013-10-11T12:41:44.667 に答える
0

私の最後のアプローチは、星が透明な「スターマスク」png画像を使用することでした。そのコンテナの背後には、ポイントのパーセント表現にアニメーション化するdivがあります。効果が好きで、非常に正確な量があります

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 :

<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-11T12:48:01.707 に答える