Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.11.2016, 07:10
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

Как с помощью 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.

Пожалуйста, помогите!
Ответить с цитированием
  #2 (permalink)  
Старый 01.11.2016, 08:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,614

zulyamodx,
Код звезд для рейтинга
Ответить с цитированием
  #3 (permalink)  
Старый 01.11.2016, 08:49
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

Здравствуйте.
В моем случае, с моим html не возможно этого сделать?
Ответить с цитированием
  #4 (permalink)  
Старый 01.11.2016, 09:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,614

звёздный рейтинг
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>

Последний раз редактировалось рони, 01.11.2016 в 18:19.
Ответить с цитированием
  #5 (permalink)  
Старый 01.11.2016, 16:46
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

Здравствуйте.
Спасибо, что ответили. Вы уже несколько раз выручаете меня.
У меня теперь работает. Но данный момент, меняется фон звездочек.
А возможно ли чтобы менялся не фон красным, а картинка ?
Спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 01.11.2016, 16:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,614

zulyamodx,
так измените ваш css как вам требуется ... или хотябы пример ваш ...
Ответить с цитированием
  #7 (permalink)  
Старый 01.11.2016, 17:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,614

zulyamodx,
смотрите код выше, корректируйте далее сами как вам нужно ...
Ответить с цитированием
  #8 (permalink)  
Старый 01.11.2016, 20:33
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Можно ли заккоментировать HTML и CSS с помощью JS? AlexKain Элементы интерфейса 6 10.06.2016 17:53
Как с помощью Javascript взять величину с одного блока и присвоить её другому Lons Общие вопросы Javascript 7 21.05.2016 01:07
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 12:29
Как сохранить css всей страницы? KupueIIIKo Events/DOM/Window 1 20.01.2012 09:39
С помощью JS добавить к ссылкам картинку в CSS wlad2 Элементы интерфейса 7 16.10.2010 23:44