0

Проблема в том что в value передается всегда только последнее значение, а не выбранное. И не получается у меня исправить это.

JS-код

$(document).ready(function(){
 starRating.create('.stars');
});

// The widget
var starRating = {
  create: function(selector) {
    // loop over every element matching the selector
    $(selector).each(function() {
      var $list = $('<div></div>');
      // loop over every radio button in each container
      $(this)
        .find('input:radio')
        .each(function(i) {
          var rating = $(this).parent().text();
          var $item = $('<a href="#"></a>')
            .attr('title', rating)
            .addClass(i % 2 == 1 ? 'rating-right' : '')
            .text(rating);

          starRating.addHandlers($item);
          $list.append($item);

          if($(this).is(':checked')) {
            $item.prevAll().andSelf().addClass('rating');
          }
        });
        // Hide the original radio buttons
        $(this).append($list).find('label').hide();
    });
  },
  addHandlers: function(item) {
    $(item).click(function(e) {
      // Handle Star click
      var $star = $(this);
      var $allLinks = $(this).parent();

      // Set the radio button value
      $allLinks
        .parent()
        .find('input:radio[value=' + $star.text() + ']')
        .attr('checked', true);

      // Set the ratings
      $allLinks.children().removeClass('rating');
      $star.prevAll().andSelf().addClass('rating');

      // prevent default link click
      e.preventDefault();

    }).hover(function() {
      // Handle star mouse over
      $(this).prevAll().andSelf().addClass('rating-over');
    }, function() {
      // Handle star mouse out
      $(this).siblings().andSelf().removeClass('rating-over')
    });    
  }

}

CSS

.stars div a {
  background: transparent url(../images/sprite_rate.png) 0 0 no-repeat;
  display: inline-block;
  height: 23px;
  width: 12px;
  text-indent: -999em;
  overflow: hidden;
}

.stars a.rating-right {
  background-position: 0 -23px;
  padding-right: 6px;
}

.stars a.rating-over {
  background-position: 0 -46px;
}

.stars a.rating-over.rating-right {
  background-position: 0 -69px;
}

.stars a.rating {
  background-position: 0 -92px;
}

.stars a.rating.rating-right {
  background-position: 0 -115px;
}

И HTML

<div class="stars" style="margin-top: -5px; float: right; padding-right: 650px;">
          <label for="rating-1"><input id="rating-1" name="rating" type="radio" value="0.5"/>0.5 балла</label>
          <label for="rating-2"><input id="rating-2" name="rating" type="radio" value="1"/>1 балл</label>
          <label for="rating-3"><input id="rating-3" name="rating" type="radio" value="1.5"/>1.5 балла</label>
          <label for="rating-4"><input id="rating-4" name="rating" type="radio" value="2"/>2 балла</label>
          <label for="rating-5"><input id="rating-5" name="rating" type="radio" value="2.5"/>2.5 балла</label>
          <label for="rating-6"><input id="rating-6" name="rating" type="radio" value="3"/>3 балла</label>
          <label for="rating-7"><input id="rating-7" name="rating" type="radio" value="3.5"/>3.5 балла</label>
          <label for="rating-8"><input id="rating-8" name="rating" type="radio" value="4"/>4 балла</label>
          <label for="rating-9"><input id="rating-9" name="rating" type="radio" value="4.5"/>4.5 балла</label>
          <label for="rating-10"><input id="rating-10" name="rating" type="radio" value="5"/>5 баллов</label>
</div>
8
  • 1
    @vitagame, попробуйте jsfiddle.net там просто отлично выкладывать тестовый код, можно подключать различные фреймворки, налету редактировать и многое другое.
    – ReinRaus
    26 мая 2013 в 6:20
  • jsfiddle.net/oceog/bHNPN
    – zb'
    26 мая 2013 в 6:37
  • 1
    @RainRaus и это говорит модератор ? Давайте на мете обсудим этот вопрос. Т.к. я устал объяснять почему "оставить только ссылку" плохо.
    – zb'
    26 мая 2013 в 6:44
  • jsfiddle.net/B68N2 что-то не работает или я не правильно делаю
    – vitagame
    26 мая 2013 в 6:52
  • @vitagame - выберите jQuery в списке фреймворков, выберете nowrap , кроме того ваша картинка должна быть доступна для fiddle, укажите полный путь.
    – zb'
    26 мая 2013 в 6:59

1 ответ 1

3

Всё сводится к неправильным селекторам. вы ищете по тексту, но текст то у вас с буквами, и потом, вы выполняете не-то действие, лучше в таких случаях просто click() по элементу вызывать:

$(document).ready(function () {
    starRating.create('.stars');
});

// The widget
var starRating = {
    create: function (selector) {
        // loop over every element matching the selector
        $(selector).each(function () {
            var $list = $('<div></div>');
            // loop over every radio button in each container
            $(this)
                .find('input:radio')
                .each(function (i) {
                var rating = $(this).parent().text();
                var $item = $('<a href="#"></a>')
                    .attr('title', rating)
                    .addClass(i % 2 == 1 ? 'rating-right' : '')
                    .text(rating).data('input', $(this)); //save input in the star element data!

                starRating.addHandlers($item);
                $list.append($item);

                if ($(this).is(':checked')) {
                    $item.prevAll().andSelf().addClass('rating');
                }
            });
            // Hide the original radio buttons
            $(this).append($list).find('label').hide();
        });
    },
    addHandlers: function (item) {
        $(item).click(function (e) {
            // Handle Star click
            var $star = $(this);
            var $allLinks = $(this).parent();

            // Set the radio button value
            $star.data('input').click(); //click on the saved input

            // Set the ratings
            $allLinks.children().removeClass('rating');
            $star.prevAll().andSelf().addClass('rating');

            // prevent default link click
            e.preventDefault();

        }).hover(function () {
            // Handle star mouse over
            $(this).prevAll().andSelf().addClass('rating-over');
        }, function () {
            // Handle star mouse out
            $(this).siblings().andSelf().removeClass('rating-over')
        });
    }

}

http://jsfiddle.net/oceog/ENf5h/3/

Ещё момент - если label оборачивает input то for="" и id="" не нужно.

1
  • Спасибо большое, помогли.
    – vitagame
    26 мая 2013 в 8:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.