有什么方法可以压缩这个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

为每个星星添加一个名为 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 2

也许这会让您了解如何稍微压缩代码：

转换数字使用 jQuery 和 CSS 进行星级显示

该代码当前将数字转换为星号，但可以轻松地进行修改以处理用于更改值的单击事件。

不需要为每个星星做单独的 img 元素，您唯一需要的是两个以星星作为背景图像的跨度，然后只需对这些跨度应用适当的宽度。

Answer 3

创建一个循环 1 直到 #rate_result 并输出 $("#star" + count).html('');

Answer 4

第 1 步：

创建 1 个变量来保存 url 字符串：

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

然后用您的变量替换所有这些字符串。

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

Answer 5

未经测试，但我猜这会起作用。

$(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 6

这是一些压缩：

$(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);
    });
});