シンプルな評価システム

評価システムを実行しようとしていますが、いくつか問題があります。ここシンプルな評価システム

は私の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"）

評価システムは、1つのブロックコードdivだけで、1つを超えていませんでした。今は多くのブロックコードで行う必要がありますが、多くの星、あなたの<div>

感謝。

出典

2016-12-14 jbernardo

@jbernardo HI、リー・ベルーは、この使用してCSSを行うためのチュートリアルがあります。あなたはいくつかのアイデアを得るかもしれません：[記事へのリンク]（http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/） – TrtlBoy

バージョン[https://jsfiddle.net/bgibson/q852ohww/](https://jsfiddle.net/bgibson/q852ohww/） – TrtlBoy

あなたはすべてのdiv要素にクラスを追加し、Class Selectorを使用することができます。

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

あなたはクラスを使用したくない場合は、あなたを@ジョンウーが提案したことをしたいかもしれません。それは同じように動作します。その後

、機能をトリガし、あなたがevent.targetを使用できるのdiv知っている：

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

が、これは、あなたの質問に答える願っています。

出典

2016-12-14 00:35:54 atcastroviejo

ありがとうございます。このように、私のコードは素晴らしいです、それは動作し、私はそれをはっきりと理解することができます。 – jbernardo

ための各1つの応答と多くの質問あなたは除いて同じ名前を持つ複数のdiv要素にハンドラを適用する場合末尾の数字のために、あなたは"starts with" selectorはできる：

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

出典

2016-12-14 00:15:19

私たちが同様のことを話しているのかどうかわかりませんが、 imgからクラス 'img-stars'を使用してください。たとえば、イベントがマウスオーバーすると、すべての星はいっぱいになります。もちろん、すべてのimagensは同じクラスです。だから、私は要素の数（DOMノード、インデックス）、笑、私は少し失われているの検索を試みました。 – jbernardo

ハンドラはバインディングOKですが、コードは特定のコントロールの代わりにすべてを打っています。そのような場合は、atcastcastiejoが提案するように '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

シンプルな評価システム

答えて

関連する問題