Форум

zulyamodx · #1 (**permalink**) 01.11.2016, 07:10

Здравствуйте.
Вы можете помочь решить эту задачу:
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.

Пожалуйста, помогите!

рони · #2 (**permalink**) 01.11.2016, 08:36

zulyamodx,
Код звезд для рейтинга

zulyamodx · #3 (**permalink**) 01.11.2016, 08:49

Здравствуйте.
В моем случае, с моим html не возможно этого сделать?

рони · #4 (**permalink**) 01.11.2016, 09:04

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 · #5 (**permalink**) 01.11.2016, 16:46

Здравствуйте.
Спасибо, что ответили. Вы уже несколько раз выручаете меня.
У меня теперь работает. Но данный момент, меняется фон звездочек.
А возможно ли чтобы менялся не фон красным, а картинка

?
Спасибо.

рони · #6 (**permalink**) 01.11.2016, 16:55

zulyamodx,
так измените ваш css как вам требуется ... или хотябы пример ваш ...

рони · #7 (**permalink**) 01.11.2016, 17:26

zulyamodx,
смотрите код выше, корректируйте далее сами как вам нужно ...

zulyamodx · #8 (**permalink**) 01.11.2016, 20:33

Рони, большое вам спасибо за помощь. Вы очень мне помогли.

Форум

Справочник

Discord чат

Курсы javascript