我试图让父母中的特定孩子改变那些课程。我是HTML和jQuery的新手,所以如果有奇怪的东西请原谅。 更具体地说,我想让所有带有fa-star-o的课程改为fa-star。
我正在尝试这样的事情: $(本).closest('全明星包装')。找到(' FA星级O')停止(真,真).prevAll()andSelf(。 ).removeClass(' FA-星 - 邻'。)addClass(' FA-星&#39);
这是HTML:
<div class="users">
<p>
<span class="rater">users</span>
<span class="all-star-wrapper">
<span class="star-wrapper">
<span class="fa fa-star-o left-star"></span>
</span>
<span class="star-wrapper">
<span class="fa fa-star-o right-star"></span>
</span>
<span class="star-wrapper">
<span class="fa fa-star-o left-star"></span>
</span>
<span class="star-wrapper">
<span class="fa fa-star-o right-star"></span>
</span>
<span class="star-wrapper">
<span class="fa fa-star-o left-star"></span>
</span>
<span class="star-wrapper">
<span class="fa fa-star-o right-star"></span>
</span>
<span class="star-wrapper">
<span class="fa fa-star-o left-star"></span>
</span>
<span class="star-wrapper">
<span class="fa fa-star-o right-star"></span>
</span>
<span class="star-wrapper">
<span class="fa fa-star-o left-star"></span>
</span>
<span class="star-wrapper">
<span class="fa fa-star-o right-star"></span>
</span>
</span>
</p>
</div>
The jQuery:
<script>
(function($){
$('.fa').hover(
// Handles the mouseover
function() {
// $(this).parent().parent().child('fa-star-o').prevAll().andSelf().removeClass('fa-star-o');
$(this).closest('all-star-wrapper').find('fa-star-o').stop(true,true).prevAll().andSelf().removeClass('fa-star-o').addClass('fa-star');//this is what i am trying
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('fa-star');
$(this).prevAll().andSelf().addClass('fa-star-o');
})})(jQuery);</script>
造型:
.ratings {
overflow: auto;
margin-bottom: 1rem;
}
.ratings .all-star-wrapper {
display: inline-block;
}
.ratings .star-wrapper {
width: 8px;
height: 16px;
overflow: hidden;
display: block;
position: relative;
float: left;
clear: none;
}
.ratings .star-wrapper .fa {
position: absolute;
margin-left: 0;
color: #45b4d9;
}
.ratings .star-wrapper .fa.left-star {
left: 0;
}
.ratings .star-wrapper .fa.right-star {
right: 1px;
}
/* line 277, ../scss/_common.scss */
.ratings p {
margin-bottom: 0;
}
/* line 281, ../scss/_common.scss */
.ratings div {
clear: both;
}
/* line 285, ../scss/_common.scss */
.ratings .rater {
margin-right: 0.5rem;
}
/* line 289, ../scss/_common.scss */
.ratings .fa {
color: #45b4d9;
font-size: 1rem;
margin-left:-4px;
}
答案 0 :(得分:0)
您没有句点(针对课程),例如('fa-star-o')
应该是代码中选择器之前的('.fa-star-o')
$(this).closest('.all-star-wrapper').find('.fa-star-o').stop(true,true).prevAll().andSelf().removeClass('.fa-star-o').addClass('.fa-star');