如何獲得半星評論

我正在創建一個星級評論機制。現在我的問題是如何捕捉半星？這就是我正在做的事情，添加一顆星星，並更改顯示每個類別上有多少顆星星的條形圖。這很好。感謝Barmar昨晚修復bug。但是這個半星真的讓我感到困擾。 jQuery的看起來像這樣如何獲得半星評論

$('.star').click(function() { 
     var num = parseInt($('.likes').eq($(this).index('.star')).text()); 
     $('.likes').eq($(this).index('.star')).text(num + 1); 

     $(this).addClass('active').off('click'); 
     $(this).prevAll().addClass('active').off('click'); 
     checkNumber(num+1); 

    });

這裏是小提琴 http://jsfiddle.net/sghoush1/VU3LP/54/

當我這樣做

$('.likes').eq($(this).index('.star')).text(num + .5);

我失去了指數

來源

2013-04-15 soum

爲什麼是半顆星？評級只是一個意見，通常並不是那麼詳細。讓他們只選擇整個星星，並在顯示退出時使用半顆星更加準確。如果您希望用戶更詳細地選擇值，只需添加更多星。 – GolezTrol

@ trol - 我同意，但不幸的是，這是簡短的。 – soum

使用半顆星的問題究竟是什麼？懸停的準確性？添加一個半星圖像？在**中更準確地說明你的技術問題。** – deceze

我在這裏做了不少變化，但基本上我做了10顆半顆星來製造5級星星。當用戶點擊一半時，相應的星級總數將增加0.5或1.0（取決於點擊哪顆星的一半）。

我刪除了類似於您的點擊事件，但更好的方法是允許用戶再次點擊，然後從第一次點擊中撤消數學。您還會注意到一些通用代碼清理等

這裏的縮短，相關的HTML

<div id="stars"> 
    <div class="star leftHalf"></div> 
    <div class="star rightHalf"></div> 
[ ... ] 

<div class="barHolder"> 
    <table> 
     <tr> 
      <td>1 star</td> 
      <td class="bar"></td> 
      <td class="likes">20</td> 
     </tr> 
     [ ... ]

CSS

.star { 
    height:20px; 
    width:10px; 
    float:left; 
    margin-right:5px; 
    cursor:pointer; 
} 
.star.leftHalf{ 
    margin-right:0px; 
}

完整的JavaScript/jQuery的

var baractive = $('<div class="barActive"></div'); 
baractive.appendTo('.bar'); 

function checkNumber() { 
    $(".likes").each(function() { 
     var valueCurrent = parseFloat($(this).text()), 
      barActive = $(this).prev(".bar").children(".barActive"); 

     if (isNaN(valueCurrent) || valueCurrent <= 20) { 
      barActive.css('width', 30); 
     } else if (valueCurrent <= 60) { 
      barActive.css('width', 80); 
     }else if (valueCurrent <= 70) { 
      barActive.css('width',120); 
     } 
    }); 
} 
checkNumber(); 

$('.star').click(function() { 
    var starIndex = $("#stars div").index($(this)), // current half clicked; 0-9 
     starLevel = Math.ceil((starIndex+1)/2)-1, // current star clicked; 0-4 
     valCur = parseFloat($('.likes').eq(starLevel).text()), // current likes value 
     isHalfStar = starIndex % 2 ? false : true, // is this a half click (left side)? 
     valNew = valCur + (isHalfStar ? 0.5 : 1.0); // new likes value 

    $('.likes').eq(starLevel).text(valNew); 

    $(".star").removeClass("active").off("click"); 
    $(this).addClass('active'); 
    $(this).prevAll().addClass('active'); 
    checkNumber(); 

});

而且工作jsFiddle http://jsfiddle.net/daCrosby/VU3LP/64/

來源

2013-04-15 04:04:21 DACrosby

+1，以解決問題，提供解決方案併發布工作示例。謝謝你，先生。 –

如何獲得半星評論

回答

相關問題