如果选定元素是javascript

时间:2017-03-19 22:30:19

标签: javascript

我正在编写一份代码,以帮助我6岁的幼儿园用她的视觉词语显示来自3个不同单词阵列的3个不同的单词。我想改变单击单词的颜色,如果选中的单词是绿色和红色的视觉单词,如果它是2中的一个不是。我不知道该怎么做。任何人都可以帮忙??



<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-1)

我们去^^

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>