Прошу прощения, я не волшебник javascript.
У меня есть страница, которая перебирает и отображает серию фотографий на основе критериев поиска. На этой странице я хочу добавить звездный рейтинг. Он работает на странице сведений о фотографии, но я хотел бы добавить ее также к l oop, чтобы пользователю не нужно было нажимать на фотографию для go на странице сведений.
Приведенный ниже код отправит значение в базу данных, но, очевидно, css не будет работать правильно, потому что оно должно быть
<div class="rate">
, а не
<div class="rate_<?php echo $resultSearch[$k]['randimgID']; ?>">
Но когда я его изменю к нему отправляет значение в базу данных для каждой фотографии, загруженной на страницу.
Я пытался сделать что-то вроде
<div class="rate" id="rate_<?php echo $resultSearch[$k]['randimgID']; ?>">
, а затем в javascript сделать его :
$('#rate_<?php echo $resultSearch[$k]['randimgID']; ?> input').on('click', function(){
Это возвращает CSS, но когда я нажимаю на звездочку, чтобы опубликовать значение, оно говорит мне, что я уже оценил фотографию, хотя я знаю, что нет.
Я также попытался изменить атрибут имени для ввода на
name="rating_<?php echo $resultSearch[$k]['randimgID']; ?>"
, а затем изменить javascript на
$('[name="rating_<?php echo $resultSearch[$k]['randimgID']; ?>"]').on('click', function(){
Также не работает ( CSS нормально, когда я нажимаю на звездочку, рейтинг не публикуется).
Что я поиск - это возможность отправки значения ставки в базу данных для выбранного изображения с использованием randimgID, без публикации того же значения в базе данных всех видимых фотографий на странице при сохранении CSS.
Соответствующий код:
<head>
.rate {
float: left;
height: 20px;
text-align: left;
}
.rate:not(:checked) > input {
position:absolute;
/*top:-9999px;*/
display: none;
}
.rate:not(:checked) > label {
float:right;
width:1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:20px;
color:#ccc;
}
.rate:not(:checked) > label:before {
/*content: '★ ';*/
content: "\2605";
}
.rate > input:checked ~ label, .rate input[checked="checked"] ~ label {
color: #ffc700;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
color: #c59b08;
}
.overall-rating{
width: 100%;
float: left;
font-size: 14px;
margin-top: 5px;
color: #8e8d8d;
}
.statusMsg{
font-size: 16px;
padding: 10px !important;
border: 1.5px dashed;
}
.statusMsg.errordiv{
color: #ff4040;
}
.statusMsg.succdiv{
color: #00bf6f;
}
</head>
if(!empty($resultSearch)) {
foreach($resultSearch as $k=>$v) {
if(is_numeric($k)) {
<!-- star rating for each photo -->
<div class="row">
<div class="container">
<div class="rate_<?php echo $resultSearch[$k]['randimgID']; ?>">
<input type="radio" id="star5" name="rating" value="5" <?php echo ($resultSearch[$k]['average_rating'] >= 5)?'checked="checked"':''; ?>>
<label for="star5"></label>
<input type="radio" id="star4" name="rating" value="4" <?php echo ($resultSearch[$k]['average_rating'] >= 4)?'checked="checked"':''; ?>>
<label for="star4"></label>
<input type="radio" id="star3" name="rating" value="3" <?php echo ($resultSearch[$k]['average_rating'] >= 3)?'checked="checked"':''; ?>>
<label for="star3"></label>
<input type="radio" id="star2" name="rating" value="2" <?php echo ($resultSearch[$k]['average_rating'] >= 2)?'checked="checked"':''; ?>>
<label for="star2"></label>
<input type="radio" id="star1" name="rating" value="1" <?php echo ($resultSearch[$k]['average_rating'] >= 1)?'checked="checked"':''; ?>>
<label for="star1"></label>
<script>
$(function() {
$('.rate_<?php echo $resultSearch[$k]['randimgID']; ?> input').on('click', function(){
var postID = <?php echo $resultSearch[$k]['randimgID']; ?>;
var ratingNum = $(this).val();
$.ajax({
type: 'POST',
url: 'rating_post.php',
data: 'postID='+postID+'&ratingNum='+ratingNum,
dataType: 'json',
success : function(resp) {
if(resp.status == 1){
$('#avgrat').text(resp.data.average_rating);
$('#totalrat').text(resp.data.rating_num);
alert('Thank you for rating. Your rate has been recorded."');
}else if(resp.status == 2){
alert('You have already rated this photo."');
}
$('.rate_<?php echo $resultSearch[$k]['randimgID']; ?> input').each(function() {
if($(this).val() <= parseInt(resp.data.average_rating)){
$(this).attr("checked", 'checked');
}else{
$(this).prop("checked", false );
}
});
}
});
});
});
</script>
</div>
</div>
</div> <!-- end star rating -->