如果所選元素是javascript中的正確元素，則更改其顏色
[英]Change the color of a selected element if it is the correct element in javascript
問題描述
我有一個代碼正在編寫，以幫助我6歲的幼兒園的她的視覺單詞顯示3個不同單詞數組中的3個不同單詞。 如果要選擇的單詞是視覺單詞，我想將單擊的單詞的顏色更改為綠色和紅色（如果不是兩個，則為綠色）。 我不確定該怎么做。 有人可以幫忙嗎？
<body> <div class="question"> <p id = "question"></p> <h1 id = "words"></h1> </div> <script> var sightWords = ["that", "as", "but", "it", "go", "and", "for", "me","do", "I", "we", "you", "can", "is", "have", "are", "was", "they", "in", "of"]; var words1 = ["cat", "dog", "rat", "hat", "log", "rug", "bed", "dot", "box", "leg", "bat", "cap", "cup", "bag", "net", "lid", "rip", "fun", "pot", "hug"]; var words2 = ["bar", "car", "gas", "set", "sit", "hit", "big", "let", "rag", "pen", "ball", "fall", "win", "hip", "pig", "lap", "hop", "mug", "hot", "hen"]; var num1 = Math.floor((Math.random() * 20) + 0); var num2 = Math.floor((Math.random() * 3) + 1); $("#question").html("Find the sight word."); if (num2 == 1){ $("#words").html(sightWords[num1] + " " + words1[num1] + " " + words2[num1]); } if (num2 == 2){ $("#words").html(words1[num1] + " " + sightWords[num1] + " " + words2[num1]); } if (num2 == 3){ $("#words").html(words1[num1] + " " + words2[num1] + " " + sightWords[num1]); } </script> </body>
1 個解決方案
解決方案1
-1 已采納 2017-03-19 22:42:48
這里我們去^^
var sightWords = ["that", "as", "but", "it", "go", "and", "for", "me","do", "I", "we", "you", "can", "is", "have", "are", "was", "they", "in", "of"]; var words1 = ["cat", "dog", "rat", "hat", "log", "rug", "bed", "dot", "box", "leg", "bat", "cap", "cup", "bag", "net", "lid", "rip", "fun", "pot", "hug"]; var words2 = ["bar", "car", "gas", "set", "sit", "hit", "big", "let", "rag", "pen", "ball", "fall", "win", "hip", "pig", "lap", "hop", "mug", "hot", "hen"]; var num1 = Math.floor((Math.random() * 20) + 0); var num2 = Math.floor((Math.random() * 3) + 1); $("#question").html("Find the sight word."); if (num2 == 1){ $("#words1").html(sightWords[num1]); $("#words2").html(words1[num1]); $("#words3").html(words2[num1]); } if (num2 == 2){ $("#words3").html(sightWords[num1]); $("#words2").html(words1[num1]); $("#words1").html(words2[num1]); } if (num2 == 3){ $("#words2").html(sightWords[num1]); $("#words1").html(words1[num1]); $("#words3").html(words2[num1]); } $("h1").click(function(){ if(sightWords.indexOf($(this).text()) > -1){ $(this).css("color","green"); } else{ $(this).css("color","red"); } });
h1 { display: inline-block; padding: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="question"> <p id = "question"></p> <h1 id = "words1"></h1><h1 id = "words2"></h1><h1 id = "words3"></h1> </div>
更改所選元素的顏色-反應
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.