자바스크립트 초급 이벤트 질문..있음다
이민진
3년 전
조회 2,812
사진을 첨부한 대로
button 이벤트로 코맨트와 그 위에 별점 이벤트를 출력해내고 싶어요.
html의 코드가 잘못된건지,
아무리 onclick으로 바꿔서 자바스크립트 가서 function 으로 구현해내려 해봐도 출력이 되질 않습니다..
1. 댓글 등록 이라는 버튼을 누르면
2. input radio의 체크 (제이쿼리로 마우스액티브를 줬음다) 값 . (1점 2점 3점.. 내지 평균값까지 같이 출력되면 더욱 좋구요)과 textarea의 코맨트의 값이
3. 제가 원하는 div comment-area 에 출력이 되게 하고 싶습니다.
돠줘세용 잠 못자유..
</p>
<p> <span class="star-input">
<span class="input">
<input type="radio" name="star-input" value="1" id="p1">
<label for="p1">1</label>
<input type="radio" name="star-input" value="2" id="p2">
<label for="p2">2</label>
<input type="radio" name="star-input" value="3" id="p3">
<label for="p3">3</label>
<input type="radio" name="star-input" value="4" id="p4">
<label for="p4">4</label>
<input type="radio" name="star-input" value="5" id="p5">
<label for="p5">5</label>
</span>
<output for="star-input"><b class="star-input_value">0</b>점</output>
</span>
<div class="area_textarea_box_input_wrap">
<textarea placeholder="최대 1,000자까지 등록 가능합니다. 영화의 스포일러 및 무관한 내용은 약간에 의해 제재 받을 수 있습니다." class="this_textarea_box" name="textcontents"></textarea>
<div style="text-align:right;">
<p id="textarea_count_num">(0/1,000)</p>
</div>
</div>
<div class="area_btn_box">
<button class="area_submit_btn">등록하기</button>
</div>
<div id="comment_area">
</div> <!--코멘트/별점 출력할 곳 css X--></p>
<p>
JS
</p>
<p>var starRating = function(){
var $star = $(".star-input"),
$result = $star.find("output>b"); </p>
<p> $(document)
.on("focusin", ".star-input>.input",
function(){
$(this).addClass("focus");
}) </p>
<p> .on("focusout", ".star-input>.input", function(){
var $this = $(this);
setTimeout(function(){
if($this.find(":focus").length === 0){
$this.removeClass("focus");
}
}, 100);
})
.on("change", ".star-input :radio", function(){
$result.text($(this).next().text());
})
.on("mouseover", ".star-input label", function(){
$result.text($(this).text());
})
.on("mouseleave", ".star-input>.input", function(){
var $checked = $star.find(":checked");
if($checked.length === 0){
$result.text("0");
} else {
$result.text($checked.next().text());
}
});
};
starRating();</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
3년 전
.on("click", ".star-input :radio", function(){
var tmp= parseInt( this.value);
var sstr=''
for( i=0; i<tmp; i++)
sstr += '*';
$('#comment_area').html( sstr);
})
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
3년 전
input radio에 value를 가져오는 소스가 없네요.
$("input[type="radio"]").val()로 값을 가져오신후 위 답변처럼 textarea에 append 하시면 될것 같습니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인