有什么方法可以压缩这个 jquery 5 星级函数？答案

【问题标题】：Any way to compress this jquery 5 star rating function?有什么方法可以压缩这个 jquery 5 星级函数？
【发布时间】：2010-01-28 17:36:16
【问题描述】：

我正在尝试将其缩小...但无法找到解决方法。基本上我想知道是否有任何方法可以将其压缩到 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>

【问题讨论】：

你能分享你正在使用的标记吗？这会有所帮助。

标签： jquery rating-system

【解决方案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);
    });
});

【讨论】：

非常感谢，太完美了！我想我已经开发了最简单的 jquery 5 星评级系统......它适用于最新版本的 jquery！我将在我的一个站点上设置一个演示页面，以便每个人都可以稍后查看！
它也会禁用较低的评级！完美运行...仍在压缩它！

【解决方案2】：

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

【讨论】：

【解决方案3】：

也许这会让你知道如何压缩你的代码：

Turn a number into star rating display using jQuery and CSS

该代码目前将数字转换为星号，但可以轻松调整以处理点击事件以更改值。

没有必要为每个星星做单独的 img 元素，你只需要两个将星星作为背景图像的跨度，然后对这些跨度应用适当的宽度。

【讨论】：

【解决方案4】：

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

【讨论】：

哇……答案比我想象的要多！这就是我喜欢 jquery 的原因……与旧 ajax 方式的 20-30 行代码相比，您可以在 5 行代码中完成功能！再次感谢...感谢所有帮助！

【解决方案5】：

第 1 步：

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

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

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

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

【讨论】：

【解决方案6】：

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

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

【讨论】：