5x 등급

에 대해 javascript를 사용하여 html5 및 css를 사용하여 5 성급 등급을 얻으려고 시도하는 중입니다.5x 등급

내가 한 것은 2 개의 이미지 중 하나가 빨강 및 녹색 별입니다.

초기에 별이 빨간색으로 표시됩니다. 등급을 매길 때 별을 클릭하면 녹색으로 표시됩니다. 내가 평가에 대한 별을 클릭하면

<!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>

내가 지금 필요한 무엇인가, 첫 번째 스타가 변경지고 :

그래서 내가 onclick을 변경 이미지를 사용 ... 여기

내 코드입니다 . 대신 별색을 클릭하면 색상이 바뀌어야합니다. ...

어떻게하면 되나요?

출처

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을 사용한다면'attr'에'prop'을 변경하십시오. –

@BillyChan'on' 이벤트 속성은 원래 HTML 4의 일부였습니다. 사용하기에 매우 까다 롭고 걱정스럽지 않은 분리입니다. HTML5가 기존 코드를 손상시키지 않기 위해 최선을 다하고 있기 때문에 주로 사용되지 않지만 IMO 여야합니다. –

내 마지막 방법은 "스타 마스크"별이 투명 PNG로 이미지를 사용했고, 해당 컨테이너 뒤에, 나는 당신이 매우 정확한 금액

을 가지고 싶게 효과를 likethe 점의 percentual 표현 사업부의 애니 메이팅을 프로그래머 는

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

답변

관련 문제