简单的评分系统

我想要做一个评分系统，但我有一些问题。简单的评分系统

，这里是我的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

简单的评分系统

回答

相关问题