我在foreach循环中有一个产品目录,我的产品id是:
$productArray[$key]["ID"]
我有一个评分系统,但我找不到如何将其单独应用于每个产品的解决方案,因为现在当我在一个产品中选择明星时,其他明星也会被选中。
<div class="rate-ex3-cnt" id="<?php echo $productArray[$key]["ID"];?>
<div id="1" value="1" class="rate-btn-1 rate-btn"></div>
<div id="2" value="2" class="rate-btn-2 rate-btn"></div>
<div id="3" value="3" class="rate-btn-3 rate-btn"></div>
<div id="4" value="4" class="rate-btn-4 rate-btn"></div>
<div id="5" value="5" class="rate-btn-5 rate-btn"></div>
</div>
<script>
// rating script
$(function(){
$('.rate-btn').hover(function(){
$('.rate-btn').removeClass('rate-btn-hover');
var therate = $(this).attr('id');
for (var i = therate; i >= 0; i--) {
$('.rate-btn-'+i).addClass('rate-btn-hover');
};
});
$('.rate-btn').click(function(){
var therate = $(this).attr('id');
var dataRate = 'act=rate&post_id=<?php echo $post_id; ?>&rate='+therate; //
$('.rate-btn').removeClass('rate-btn-active');
for (var i = therate; i >= 0; i--) {
$('.rate-btn-'+i).addClass('rate-btn-active');
};
$.ajax({
type : "POST",
url : "http://localhost/rating/ajax.php",
data: dataRate,
success:function(){}
});
});
});
</script>
问题是,您不是在.rate-exc3-nt项的上下文中,而是全局的。因此,您需要使用上下文来查找费率按钮。
//$(this).closest('.rate-ex3-cnt').find('.....') ...
这仅适用于悬停速率btn上下文的更改,而不适用于全局。
$('.rate-btn').hover(function(){
$(this).closest('.rate-ex3-cnt').find('.rate-btn').removeClass('rate-btn-hover');
var therate = $(this).attr('id');
for (var i = therate; i >= 0; i--) {
$(this).closest('.rate-ex3-cnt').find('.rate-btn-'+i).addClass('rate-btn-hover');
};
});
对于单击功能,也要执行相同的操作。更换$('.rate-btn').removeClass('...') with $(this).closest('.rate-ex3-cnt').find('.rate-btn').removeClass('...')
有2个问题
- id选择器->将始终为您获取与id匹配的第一个元素
- 用于添加/删除类的类->它将选择具有匹配类的所有元素,而不考虑评级块
解决方案
假设您有以下结构
<div class="rating">
<div data-value="1" class="rate-btn-1 rate-btn">1</div>
<div data-value="2" class="rate-btn-2 rate-btn">2</div>
<div data-value="3" class="rate-btn-3 rate-btn">3</div>
<div data-value="4" class="rate-btn-4 rate-btn">4</div>
<div data-value="5" class="rate-btn-5 rate-btn">5</div>
</div>
<div class="rating">
<div data-value="1" class="rate-btn-1 rate-btn">1</div>
<div data-value="2" class="rate-btn-2 rate-btn">2</div>
<div data-value="3" class="rate-btn-3 rate-btn">3</div>
<div data-value="4" class="rate-btn-4 rate-btn">4</div>
<div data-value="5" class="rate-btn-5 rate-btn">5</div>
</div>
然后,您可以将点击功能绑定到其父项,然后可以隔离产品的评级,如以下
$('.rating').click(function(event){
var value = $(event.target).data("value");
for (var i = value; i >= 0; i--) {
$(this).find('.rate-btn-'+i).css("color", "red");
}
});
供参考-http://plnkr.co/edit/G9bfvlBQjXZ3UUvwOv6a?p=preview
我认为您需要获取div的父id,因此它对所有产品都是唯一的,因此您可以针对产品的单个星
<script>
// rating script
$(function(){
$('.rate-btn').hover(function(){
var Id=$(this).parents(".rate-ex3-cnt").attr("id);//Take parent Id
$("#"+Id+ '.rate-btn').removeClass('rate-btn-hover');
var therate = $(this).attr('id');
for (var i = therate; i >= 0; i--) {
$("#"+Id+ '.rate-btn-'+i).addClass('rate-btn-hover');
};
});
$('.rate-btn').click(function(){
var Id=$(this).parents(".rate-ex3-cnt").attr("id); //Take Parent Id
var therate = $(this).attr('id');
var dataRate = 'act=rate&post_id=<?php echo $post_id; ?>&rate='+therate; //
$("#"+Id+ '.rate-btn').removeClass('rate-btn-active');
for (var i = therate; i >= 0; i--) {
$("#"+Id+ '.rate-btn-'+i).addClass('rate-btn-active');
};
$.ajax({
type : "POST",
url : "http://localhost/rating/ajax.php",
data: dataRate,
success:function(){}
});
});
});
</script>