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

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

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

Turn a number into star rating display using jQuery and CSS

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

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

Answer 4

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

Answer 5

第1步：

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

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

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

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

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

有没有办法压缩这个jquery 5星评级功能？

6 个答案: