jquery 좀 여쭤볼게요 정보
jquery 좀 여쭤볼게요관련링크
본문
별점 스크립트인데요.
테스트 페이지 url은 링크에 남겨두었습니다.
<script>
$(function(){
$('form').submit(function(){
$('.test',this).html('');
$('input',this).each(function(){
if(this.checked) $('.test',this.form).append(''+this.name+': '+this.value+'<br/>');
});
return false;
});
});
$(function(){
$('.hover-star').rating({
focus: function(value, link){
var tip = $('#hover-test');
tip[0].data = tip[0].data || tip.html();
tip.html(link.title || 'value: '+value);
},
blur: function(value, link){
var tip = $('#hover-test');
$('#hover-test').html(tip[0].data || '');
}
});
});
</script>
<form id="form4">
<div>
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="1" title="1" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="2" title="2" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="3" title="3" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="4" title="4" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="5" title="5" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="6" title="6" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="7" title="7" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="8" title="8" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="9" title="9" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="10" title="10" />
<span id="hover-test" style="margin:0 0 0 20px;">여기에 별점</span>
</div>
<br /><br /><br /><br />
<input type="submit" value="Submit scores!"/>
<br /><br />
<div class="test">
<span style="color:#FF0000">Results will be displayed here</span>
</div>
</form>
제가 구현하고 싶은것은
별을 클릭했을 때에는 마우스-blur를 하더라도..
선택한 별점이 hover-test 영역에 계속 표시되게 하고 싶습니다.
그리고 다시 마우스오버했을때에는
다시 hover-test영역 값이 변하고...다시 blur하면 전에 선택한 별점이 표시되고..
전에 선택하지 않았다면 디폴트로 0이 표시되고..
스크립트는 전혀 몰라서...도무지 딴 문서들을 봐도 구현이 안되네요.
좀 도와주세용~
테스트페이지는 링크에 남겨두겠습니다.
테스트 페이지 url은 링크에 남겨두었습니다.
<script>
$(function(){
$('form').submit(function(){
$('.test',this).html('');
$('input',this).each(function(){
if(this.checked) $('.test',this.form).append(''+this.name+': '+this.value+'<br/>');
});
return false;
});
});
$(function(){
$('.hover-star').rating({
focus: function(value, link){
var tip = $('#hover-test');
tip[0].data = tip[0].data || tip.html();
tip.html(link.title || 'value: '+value);
},
blur: function(value, link){
var tip = $('#hover-test');
$('#hover-test').html(tip[0].data || '');
}
});
});
</script>
<form id="form4">
<div>
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="1" title="1" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="2" title="2" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="3" title="3" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="4" title="4" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="5" title="5" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="6" title="6" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="7" title="7" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="8" title="8" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="9" title="9" />
<input class="hover-star {split:2}" type="radio" name="test-4-rating-3" value="10" title="10" />
<span id="hover-test" style="margin:0 0 0 20px;">여기에 별점</span>
</div>
<br /><br /><br /><br />
<input type="submit" value="Submit scores!"/>
<br /><br />
<div class="test">
<span style="color:#FF0000">Results will be displayed here</span>
</div>
</form>
제가 구현하고 싶은것은
별을 클릭했을 때에는 마우스-blur를 하더라도..
선택한 별점이 hover-test 영역에 계속 표시되게 하고 싶습니다.
그리고 다시 마우스오버했을때에는
다시 hover-test영역 값이 변하고...다시 blur하면 전에 선택한 별점이 표시되고..
전에 선택하지 않았다면 디폴트로 0이 표시되고..
스크립트는 전혀 몰라서...도무지 딴 문서들을 봐도 구현이 안되네요.
좀 도와주세용~
테스트페이지는 링크에 남겨두겠습니다.
댓글 전체