Как с помощью javascript изменять класс css?
Здравствуйте.
Вы можете помочь решить эту задачу: 1. При наведении курсором на звездочку, класс в этом блоке:
<span class="star-rating-control">
<input type="hidden" name="rate1_1" value="">
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_0">
<a title="1">1</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_1">
<a title="2">2</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_2">
<a title="3">3</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_3">
<a title="4">4</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_4">
<a title="5">5</a>
</div>
</span>
менялся на следующее:
<span class="star-rating-control">
<input type="hidden" name="rate1_1" value="">
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-hover" id="CompanyReviewForm_rating1_0">
<a title="1">1</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-hover" id="CompanyReviewForm_rating1_1">
<a title="2">2</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-hover" id="CompanyReviewForm_rating1_2">
<a title="3">3</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-hover" id="CompanyReviewForm_rating1_3">
<a title="4">4</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-hover" id="CompanyReviewForm_rating1_4">
<a title="5">5</a>
</div>
</span>
2. А также при клике на соответствующей звездочке, в звездочках класс менялся на:
<span class="star-rating-control">
<input type="hidden" name="rate1_1" value="">
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-on" id="CompanyReviewForm_rating1_0">
<a title="1">1</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-on" id="CompanyReviewForm_rating1_1">
<a title="2">2</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-hover" id="CompanyReviewForm_rating1_2">
<a title="3">3</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-on" id="CompanyReviewForm_rating1_3">
<a title="4">4</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live star-rating-on" id="CompanyReviewForm_rating1_4">
<a title="5">5</a>
</div>
</span>
Пояснение к вопросу. Есть 5 звездочек. Посетитель может дать любую оценку от 1 до 5. Поэтому он может кликнут на любой звездочке. Когда он наводит курсор на 3 звездочку, то в предыдущих 2 звездочках как и в третьем должен поменяться на star-rating rater-0 star-rating-applied star-rating-live star-rating-hover, а при клике на звездочке, скажем на 3 звездочке, то в 1, 2, 3 класс должен поменяться на star-rating rater-0 star-rating-applied star-rating-live star-rating-on. Пожалуйста, помогите! |
|
Здравствуйте.
В моем случае, с моим html не возможно этого сделать? |
звёздный рейтинг
zulyamodx,
можно но в глазах рябит от классов
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #EE82EE;
}
.free:hover .star-rating, .star-rating-control.hover .star-rating{
background-position: 0px -113px;
color: #FFD700;
}
.free:hover .star-rating:hover ~ .star-rating, .star-rating-control.hover .star-rating.hover ~ .star-rating {
background-position: 0px 1px;
color: #3DC430;
}
.star-rating{
cursor: pointer;
text-align: center;
line-height: 34px;
background-position: 0px 1px;
background-image: url(http://kredito.com.ua/bitrix/template/kredito/files/stars-full.svg);
background-repeat: no-repeat;
background-size: cover;
width: 30px;
height: 30px;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".star-rating-control").each(function(indx, el){
$(el).on('click', '.star-rating', function(event) {
event.preventDefault();
if(!$(el).is('.free')) return;
$(el).add(this).addClass('hover').removeClass('free');
var rating = +$('.star-rating',el).index(this);
$('input',el).val(++rating);
})
});
});
</script>
</head>
<body>
<span class="star-rating-control free">
<input type="hidden" name="rate1_1" value="">
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_0">
<a title="1">1</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_1">
<a title="2">2</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_2">
<a title="3">3</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_3">
<a title="4">4</a>
</div>
<div role="text" aria-label="" class="star-rating rater-0 star-rating-applied star-rating-live" id="CompanyReviewForm_rating1_4">
<a title="5">5</a>
</div>
</span>
</body>
</html>
|
Здравствуйте.
Спасибо, что ответили. Вы уже несколько раз выручаете меня. У меня теперь работает. Но данный момент, меняется фон звездочек. А возможно ли чтобы менялся не фон красным, а картинка  ?Спасибо. |
zulyamodx,
так измените ваш css как вам требуется ... или хотябы пример ваш ... |
zulyamodx,
смотрите код выше, корректируйте далее сами как вам нужно ... |
Рони, большое вам спасибо за помощь. Вы очень мне помогли.
|
| Часовой пояс GMT +3, время: 18:35. |