Jquery clickイベントif文

Question

私のウェブページにトリビアをメインコンポーネントとして追加しています。私は正しい時には「正しい」、それが間違っている時には「間違った」クラスに挑戦しています。何をしているかが自分もわからない。笑。どんな助けでも大歓迎です。

<ul> 
     <li id="a">A) Lucy</li> 
     <li id="b">B) Bonnie</li> 
     <li id="c">C) Sheila</li> 
     <li id="d">D) Kai</li> 
    </ul> 

jQueryの

私は、正しいものはこのソリューションでは、権利を与えるに依存しているjQueryの

var right = $("ul li#a").on(click, function() {}); 

if (click === right){ 
    $("ul li#a").addClass("correct"); 
} else { 
    $("li").addClass("wrong"); 
} 

Answer 1

私はあなたの最終目標を理解していた場合は、あなたが答えは「右」の答えであるかないことを示すために何かをしたい、あなたがしたいです「正しい」答えが得られた場合は、クラス.correctまたは.wrongを割り当てます。

「正しい」答えにdata-right="right"を割り当てます。次に、誰かがliをクリックしたら、その属性を探して、「正しい」回答を選択した場合は.correctを割り当て、そうでない場合は.wrongを割り当てます。ここで

$('li').on('click',function() { 
 
    var right = $(this).data('right'); 
 
    $(this).siblings().removeClass('correct wrong'); 
 
    if (right == "right") { 
 
    $(this).addClass('correct'); 
 
    } else { 
 
    $(this).addClass('wrong'); 
 
    } 
 
})

.correct { 
 
    color: green; 
 
} 
 
.correct:after { 
 
    content: '\2713'; 
 
} 
 
.wrong { 
 
    color: red; 
 
} 
 
.wrong:after { 
 
    content: '\2613'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="a" data-right="right">A) Lucy</li> 
 
    <li id="b">B) Bonnie</li> 
 
    <li id="c">C) Sheila</li> 
 
    <li id="d">D) Kai</li> 
 
</ul>

Answer 2

内の変数は、その後、クリックイベントをバインド、「correctAnswer」と呼ばれるクラスに答えて作ってみましたハンドラは、そのクラスがあるかどうかに基づいて、クリックされたクラスを設定します（li）。私はそれはあなたが探しているものんだと思う：

<ul> 
    <li id="a" class="correctAnswer">A) Lucy</li> 
    <li id="b">B) Bonnie</li> 
    <li id="c">C) Sheila</li> 
    <li id="d">D) Kai</li> 
</ul> 

$('li').on('click', function() { 
    var classToAdd = $(this).is('.correctAnswer') ? 'correct' : 'wrong'; 
    $(this).addClass(classToAdd); 
}); 

Answer 3

完全な例です：

 
    $(document).ready(function() { 
 

 
     var correctAnser = 'a'; // you need to set this to what you need the answer to be 
 
\t  $('ul li').on('click', function() { 
 
      $('ul li').removeClass('correct').removeClass('wrong'); // remove both classes on list elements 
 
      var classToAdd = $(this).attr('id') == correctAnser ? 'correct' : 'wrong'; 
 
      $(this).addClass(classToAdd); 
 
\t  }); 
 
    }); 
 

.correct { 
 
     background:#2bb539; 
 
     color:#ffffff; 
 
    } 
 
    .wrong { 
 
     background:#c00; 
 
     color:#ffffff; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
     <li id="a">A) Lucy</li> 
 
     <li id="b">B) Bonnie</li> 
 
     <li id="c">C) Sheila</li> 
 
     <li id="d">D) Kai</li> 
 
    </ul>