Простая рейтинговая система

Я пытаюсь создать систему рейтинга, но у меня есть некоторые проблемы.Простая рейтинговая система

вот мой 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- звезд4 ... # divstars20). Да, есть много вопросов из моего опроса, но я не хочу повторять код, я имею в виду, что я не хочу кодировать какие-либо одно и то же вещи ($ ("# div-stars1"). Mouseover (function() { ....}), $ ("# 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

Вы можете добавить класс для всех дивы и использовать Class Selector:

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

Если вы не хотите использовать классы, вам может захотеть сделать то, что @John Wu предложил. Он работает одинаково.

Затем, чтобы узнать, какой ДИВ вызвал функцию, вы можете использовать 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

Если вы хотите применить обработчик к несколько DIVs, которые имеют такое же имя, за исключением для числа в конце концов, вы могли "starts with" selector:

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

источник

2016-12-14 00:15:19

Я не знаю, говорим ли мы об аналогичной вещи, но я попытался использовать класс «img-stars» из img, но, например, когда событие является наведением мыши, все звезды заполнены, конечно, все изображения имеют один и тот же класс. Итак, я попробовал поиск по количеству элементов (узел DOM, индекс), lol, я немного потерялся. – jbernardo

Таким образом, обработчик привязан в порядке, но ваш код поражает все, а не конкретный элемент управления. Если это так, вам нужно использовать 'event.target.id', как предлагалось atcastroviejo. –

Пробуйте этот код для получения рейтинговой системы на основе звезд.

<!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

Простая рейтинговая система

ответ

Смежные вопросы