簡單的評分系統

我想要做一個評分系統，但我有一些問題。簡單的評分系統

，這裏是我的html：

    <div id="div-stars1">     
         <img src="assets/imagens/star_empty_na.png" style="width: 25px" id="img-starsna"> 
         <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star1"> 
         <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star2"> 
         <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star3"> 
         <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star4"> 
         <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star5">        
        </div> 

        <div id="div-stars2">     
         <img src="assets/imagens/star_empty_na.png" style="width: 25px" id="img-starsna"> 
         <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star6"> 
         <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star7"> 
         <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star8"> 
         <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star9"> 
         <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star10">        
        </div>

好吧，我就需要有這樣幾個塊碼，但我不喜歡有很多功能這個（＃DIV-stars3，＃div- stars4 ...＃divstars20）。是的，我的民意調查中有很多問題，但我不想重複代碼，我的意思是，我不想編碼任何相同的東西（$（「＃div-stars1」）。 ...}），$（「＃div-stars2」）。mouseover（function（）{....}），$（「＃div-stars3」）.....所以，我想一些建議，我想要一個乾淨，精益和動態的代碼

我做了評分系統只是一個塊代碼div，不超過一個現在我需要做很多的代碼塊，與衆多明星很多問題，每一個回答您的<div>

感謝。

來源

2016-12-14 jbernardo

HI @jbernardo，利·貝羅有一個教程做到這一點使用CSS。你可能會從中獲得一些想法：[鏈接到文章]（http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/） – TrtlBoy

繼承人一個小提琴鏈接到CSS版本[https://jsfiddle.net/bgibson/q852ohww/](https://jsfiddle.net/bgibson/q852ohww/） – TrtlBoy

你可以添加一個類的所有div並使用Class Selector：

$(".class").on("mouseover", function() { 
    ... 
});

如果你不想使用類，你可能想要做什麼@約翰吳建議。它的工作原理相同。

以後，才知道其中的div觸發的功能，你可以使用event.target：

$(".class").on("mouseover", function() { 
    // alert the id of the hovered div 
    alert(event.target.id); 
});

希望這回答了你的問題。

來源

2016-12-14 00:35:54 atcastroviejo

謝謝。從這種方式表明，我的代碼很棒，它的工作原理，我可以清楚地理解它。 – jbernardo

如果你想申請一個處理程序具有相同的名稱，除了多個div在最後的數字，你可以在"starts with" selector：

$("DIV[ID^='divstars']").mouseover(etc.)

來源

2016-12-14 00:15:19

我不知道我們是否在談論類似的事情，但我試過使用img類的'img-stars'，但是例如，當事件是鼠標懸停時，所有星星都會被填滿，當然，所有的圖像都具有相同的類別。所以，我試過搜索元素的數量（DOM節點，索引），哈哈，我有點迷路。 – jbernardo

所以處理程序綁定好，但你的代碼是擊中一切，而不是具體的控制。如果是這種情況，你需要使用atcastroviejo建議的'event.target.id'。 –

試試這個代碼獲取基於星級的評分系統。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <!-- Font Awesome Icon Library --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    <style> 
 
    #priorityFlag { 
 
     color: rgb(241, 241, 70); 
 
     font-size: 1em; 
 
     padding: 0.25em; 
 
     border-width: 1px; 
 
     border-style: solid; 
 
     border-radius: 50%; 
 
    } 
 
    
 
    .fa-star {} 
 
    
 
    .fa-star:hover { 
 
     cursor: pointer; 
 
    } 
 
    
 
    .checkedStar { 
 
     color: rgb(248, 248, 41); 
 
    } 
 
    
 
    #ratingBox { 
 
     width: 150px; 
 
    } 
 
    
 
    #ratinngBox::after { 
 
     content: ''; 
 
     display: block; 
 
     clear: both; 
 
    } 
 
    
 
    #starsBox { 
 
     
 
     float: left; 
 
     width: 70%; 
 
    } 
 
    
 
    #flagBox { 
 
     width: 30%; 
 
     float: right; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <h2>Star Rating</h2> 
 
    <div id="ratingBox"> 
 
    <div id="starsBox"> 
 
     <span class="fa fa-star checkedStar" data-priority-value="0" data-status-marked="true"></span> 
 
     <span class="fa fa-star" data-priority-value="1" data-status-marked="false"></span> 
 
     <span class="fa fa-star" data-priority-value="2" data-status-marked="false"></span> 
 
     <span class="fa fa-star" data-priority-value="3" data-status-marked="false"></span> 
 
     <span class="fa fa-star" data-priority-value="4" data-status-marked="false"></span> 
 
    </div> 
 
    <div id="flagBox"> 
 
     <span class="fa fa-flag" id="priorityFlag"></span> 
 
    </div> 
 
    </div> 
 

 
    <script> 
 
    var stars = document.getElementsByClassName("fa-star"); 
 
    // console.log("obj of strs array",stars); 
 
    Array.prototype.forEach.call(stars, (star) => star.addEventListener("click", setPriority)); 
 

 
    var rateColors = ['rgb(248, 248, 41)', 'gold', 'orange', 'darkorange', 'red']; 
 
    var flag = document.getElementById("priorityFlag"); 
 

 

 
    function setPriority(event) { 
 
     var star = event.srcElement; 
 
     var priority = star.getAttribute("data-priority-value"); 
 
     // console.log("proirity is ",priority); 
 
     var index = priority; 
 

 
     var markedStar = star.getAttribute("data-status-marked"); 
 
     // console.log("is this star marked status",markedStar,"index is ",index); 
 
     if (markedStar == "false") 
 
     markStar(index); 
 
     else //if(markedStar=="true") 
 
     unMarkStar(index); 
 
     // else 
 
     // console.log("extremly wrong happening in setPriority function"); 
 
    } 
 

 
    function markStar(index) { 
 

 
     for (let i = 0; i <= index; i++) { 
 
     stars[i].style.color = rateColors[index]; 
 
     // console.log("inside markStar marking "+i+" th star marked"); 
 
     stars[i].setAttribute("data-status-marked", "true"); 
 

 
     // console.log("true marked obj",stars[i],"marked status is",stars[i].getAttribute("data-status-marked")); 
 
     } 
 
     updateFlag(index); 
 
    } 
 

 
    function unMarkStar(index) { 
 
     for (let i = 1; i < stars.length; i++) { 
 
     // console.log("marking",`${i}`,stars[i]); 
 
     stars[i].style.color = 'black'; 
 
     stars[i].setAttribute("data-status-marked", "false"); 
 
     } 
 
     // console.log("inside umMarkStar",index,` nextline is markStar(${index})false`); 
 
     markStar(index); 
 

 
    } 
 

 
    function updateFlag(index) { 
 

 
     // console.log("update flag acc to",index,rateColors[index]);//updating flag color to this index of flagColors array 
 
     flag.style.color = rateColors[index]; 
 
     flag.style.borderColor = rateColors[index]; 
 

 

 
    } 
 
    </script> 
 
</body> 
 

 
</html>

來源

2018-02-08 21:38:05

簡單的評分系統

回答

相關問題