jQuery的評級系統

我試圖從0做一個評級系統，到目前爲止，我有兩個類和關閉，總共有5星，jQuery的評級系統

這將顯示該項目的等級，直到人懸停在他們，那麼它會高亮顯示以前的明星和隱藏的額定電流，

<div id="stars"> 
<div class="on"></div> 
<div class="on"></div> 
<div class="on"></div> 
<div class="off"></div> 
<div class="off"></div> 
</div>

的JS我走到這一步，

$('#stars').mouseover(function() { 
     $(this).children().prevAll().andSelf().attr('class', 'on'); 
    $(this).nextAll().attr('class', 'on'); 
    });

其中僅hilights全部啓動，並打亂了一切，任何人可以幫忙嗎？工作太多時間，只是不能得到它的工作..

謝謝！

來源

2011-08-10 Saulius Antanavicius

有用的評論。我正在尋找一個簡單的解決方案，大部分我曾與無論是使用JS與圖像或有大量的jQuery。 –

沒有必要特別諷刺，因爲你從來沒有解釋過你爲什麼要從頭開始做這件事。 PPrice的評論確實很有幫助，因爲它鏈接到一個功能齊全的插件，或者任何閱讀此主題的人都可以直接使用。 – Sparky

如果你使用這個作爲前點擊預覽，那麼你可能需要使用懸停功能是這樣的：

$('#stars .star').hover(
    function() { 
     $(this).prevAll().andSelf().addClass('on'); 
     $(this).nextAll().removeClass('on'); 
    }, 
    function() { 
     $(this).parent().children().removeClass('on'); 
    } 
);

，隨着這個的jsfiddle的HTML飛到哪裏，你可以看到它工作：http://jsfiddle.net/jfriend00/aRTzQ/

我也建議使用addClass()和removeClass()而不是直接操縱屬性，因爲它給你更多的靈活性，讓對象上的其他類更具可讀性。

要點擊粘性，以便記住設置，可以使用如下所示：http://jsfiddle.net/jfriend00/QxADg/。相應的CSS/HTML在小提琴中。

$('#stars .star').hover(
    function() { 
     $(this).prevAll().andSelf().addClass('preview'); 
     $(this).nextAll().removeClass('preview'); 
    }, 
    function() { 
     $(this).parent().children().removeClass('preview'); 
    } 
); 

$('#stars .star').click(function() { 
    $(this).parent().children().removeClass('on'); 
    $(this).prevAll().andSelf().addClass('on'); 
}); 

$('#stars').hover(
    function() {$(this).addClass("inPreview");}, 
    function() {$(this).removeClass("inPreview");} 
);

來源

2011-08-10 22:29:34 jfriend00

這將工作得很完美，但他們已經有一個負載開或關的狀態，有沒有辦法簡單地修改這個工作呢？因爲它們中的一些在懸停之前處於打開和關閉狀態 –

您必須描述您希望如何更詳細地工作。現在，這是「預覽式」代碼。它並不代表初始狀態，也沒有任何機制（例如點擊）來鎖定狀態。你必須解釋你想如何工作。 – jfriend00

嗨，對不起，如果你看到樣品上下課，那麼代碼是如何加載的，取決於它有多少顆恆星，那麼我希望用戶能夠隨心所欲地執行你的代碼不，如果他們不點擊（我稍後將添加手柄），當用戶將他的鼠標從星星移開時它會顯示相同的加載狀態，這有助於嗎？謝謝！ –

這裏有很多插件，比如一個PPrice鏈接。我同意其他人的看法，那就是更好的方式，除非他們因某種原因不滿足您的需求。

如果你想使這個代碼工作，或者如果你只是這樣做的學習，也許這就是你想要做的？

您可以將鼠標懸停在「星星」（框）上以查看顏色變化。

http://jsfiddle.net/pW3Sn/

$('#stars > div').mouseover(function() { 
     $(this).prevAll().andSelf().attr('class', 'on'); 
     $(this).nextAll().attr('class', 'off'); 
});

來源

2011-08-10 22:18:57

我將如何設計out功能？就像我沒有投票一樣，我將鼠標移開了？ –

請參閱http://jsfiddle.net/pW3Sn/1/ –

爲什麼不使用別人的插件？例如http://www.fyneworks.com/jquery/star-rating/

來源

2011-08-10 22:20:57

其實你可以使用純CSS來實現它。

HTML代碼：

<div id="stars"> 
    <div class="star"> 
     <div class="star"> 
      <div class="star"> 
       <div class="star"> 
        <div class="star"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

和CSS：

#stars { 
    height: 16px; /* height of stars block */ 
} 
#stars .star { 
    height: 16px; /* height of one star */ 
    padding-left: 16px; /* width of one star */ 
    background-image: url('http://url.to.your.star.image'); 
    float: left; 
} 
#stars .star:hover, 
#stars .star :hover { 
    background-position: 0px -16px; /* toggle image */ 
}

工作的示例：http://jsfiddle.net/4CfzD/

來源

2011-08-11 22:23:49 Karolis

jQuery的評級系統

回答

相關問題