Любой способ сжать эту jquery функцию оценки 5 звезд?

Question

Я пытаюсь уменьшить это ... но не могу найти способ сделать это. В основном мне интересно, есть ли способ сжать его до 5 строк или около того ??

Спасибо за вашу помощь!

$(function() {
  $('.star-one').live("click",function() {
    $("#rate_result").html('1');
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
  });

  $('.star-two').live("click",function() {
    $("#rate_result").html('2');
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
    $("#star2").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
  });

  $('.star-three').live("click",function() {
    $("#rate_result").html('3');
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
    $("#star2").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
    $("#star3").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
  });

  $('.star-four').live("click",function() {
    $("#rate_result").html('4');
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
    $("#star2").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
    $("#star3").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
    $("#star4").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
  });

  $('.star-five').live("click",function() {
    $("#rate_result").html('5');
    $("#star1").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
    $("#star2").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
    $("#star3").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
    $("#star4").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
    $("#star5").html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
  });
});

Вот HTML:

<div id="rate_result"></div>
<div id="stars-container">
  <ul class='star-rate'>
    <li id="star1">
      <a href='#' title='' class="star-one" id="1">mmmm</a>
    </li>
    <li id="star2">
      <a href='#' title='' class="star-two" id="2">try again</a>
    </li>
    <li id="star3">
      <a href='#' title='' class="star-three" id="3">mmm not bad</a>
    </li>
    <li id="star4">
      <a href='#' title='' class="star-four" id="4">this is cool ya!</a>
    </li>
    <li id="star5">
      <a href='#' title='' class="star-five" id="5">very good</a>
    </li>
  </ul>
</div>

Answer 1

Вот немного сжатия:

$(function() {
    var star_tag = '<img src="http://larsonreviews.com/rating/star_ena.gif" border="0" alt="*">';
    $('.star-one').live("click",function() {
        $("#rate_result").html('1');
        $("#star1").html(star_tag);
    });
    $('.star-two').live("click",function() {
        $("#rate_result").html('2');
        $("#star1, #star2").html(star_tag);
    });
    $('.star-three').live("click",function() {
        $("#rate_result").html('3');
        $("#star1, #star2, #star3").html(star_tag);
    });
    $('.star-four').live("click",function() {
        $("#rate_result").html('4');
        $("#star1, #star2, #star3, #star4").html(star_tag);
    });
    $('.star-five').live("click",function() {
        $("#rate_result").html('5');
        $("#star1, #star2, #star3, #star4, #star5").html(star_tag);
    });
});

Answer 2

Возможно, это даст вам представление о том, как можно немного сжать код:

Превратите число в отображение звездного рейтинга с помощью jQuery и CSS

Этот код в настоящее время превращает числа в звезды, но его можно легко адаптировать для обработки событий щелчка для изменения значения.

Нет необходимости создавать отдельные элементы img для каждой звезды, единственное, что вам нужно, это два пролета, которые имеют звезды в качестве фонового изображения, а затем просто применяют правильную ширину к этим отрезкам.

Answer 3

добавить класс с именем star к каждой звезде

$('.star').live("click",function() {
$("#rate_result").html($(this).prevAll('.star').length+1);
$(this).prevAll('.star').addClass('enabled') // where enabled would add a background image(like star_ena.gif)
});

Answer 4

Не проверено, но я думаю, это сработает.

$(function() {
var textrep=new Array("zero","one","two", "three", "four", "five");
for (i=1; i<=5; i++)
{
$('.star-'+textrep[i]).live("click",function() {
$("#rate_result").html(i);
for (j=1; j<=i; j++)
{
    $("#star"+j).html('<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">');
}
});
    }
});

Answer 5

Шаг 1:

Создать 1 переменную для хранения строки URL:

var img = '<img src="http://larsonreviews.com/rating/star_ena.gif" border="0">';

затем замените все эти строки вашей переменной.

$("#star1").html(img);

Answer 6

Создайте цикл для 1 до #rate_result и output $("#star" + count).html('<img />');