Question

我将琐事添加为我的网页的主要组件。我正在努力学习＆＃34;纠正＆＃34;如果它是正确的，并且＆＃34;错误的＆＃34;什么时候错了。我不知道我在做什么。大声笑。任何帮助将不胜感激。

    <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

此解决方案依赖于给出一个名为＆＃34; correctAnswer＆＃34;的类的正确答案，然后绑定一个单击事件处理程序，该处理程序根据是否具有该类来设置所单击的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 2

如果我了解你的最终目标，你想做点什么来表明答案是＆＃34;对＆＃34;是否回答，如果他们得到了＃34;那么你想要分配班级.correct或.wrong＆＃34;回答与否。

我会将data-right="right"分配给＆＃34;权利＆＃34;回答。然后当有人点击li时，查找该属性并指定.correct，如果他们选择＆＃34;右＆＃34;回答，如果没有，请指定.wrong。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这是一个完整的例子：

 
    $( document ).ready(function() {

        var correctAnser = 'a'; // you need to set this to what you need the answer to be
	    $('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);
	    });
    });

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

Jquery单击事件if语句

3 个答案: