Question

我有一些html，五个答案选项，正确的答案选项位于底部。我一直在尝试学习jQuery，并亲自提出了这段代码，我想做的是，如果用户单击的答案选项等于正确答案选项的值，则$ this或用户选择的内容单击的按钮应变为绿色，如果用户单击其他任何按钮，则应变为红色并删除所有其他类。

这是我到目前为止的内容： HTML

<div class="answer-choice" id="one">answer choice 1</div>

<div class="answer-choice" id="two">answer choice 2</div>

<div class="answer-choice" id="three">answer choice 3</div>

<div class="answer-choice" id="four">answer choice 4</div>

<div class="answer-choice" id="five">answer choice 5</div>

<hr>
<div class="correct-choice">answer choice 5</div>

jQuery

$(".answer-choice").on("click", function(event) {
  var $this = $(this);

  if $this === (".correct-choice").text {
    $this.css({
      backgroundColor: '#000'
    });
  }
  else {
    $this.css({
      backgroundColor: '#f00'
    });
  }
});

将感谢您的指导和帮助。这是我执行此操作的代码笔的链接：https://codepen.io/anon/pen/WKLEPV

Answer 1

您的代码在以下语法上是错误的：

if $this === (".correct-choice").text {

如果答案正确，则将除当前答案以外的所有答案的颜色重置为默认颜色。

尝试以下方式：

$(".answer-choice").on("click",
function(event) {
  var $this = $(this);
  if ($this.text() === $(".correct-choice").text()) {
    $this.css({
        backgroundColor: '#0f0'
    });

    $(".answer-choice").not(this).each(function(){
        $(this).css({
          backgroundColor: '#fff'
      });
    });
  }
  else {
    $this.css({
        backgroundColor: '#f00'
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answer-choice" id="one">answer choice 1</div>

<div class="answer-choice" id="two">answer choice 2</div>

<div class="answer-choice" id="three">answer choice 3</div>

<div class="answer-choice" id="four">answer choice 4</div>

<div class="answer-choice" id="five">answer choice 5</div>

<hr>
<div class="correct-choice">answer choice 5</div>

Answer 2

您的Javascript代码存在语法错误。您的if语句中需要括号。

if $this === ("correct-choice").text

应该是

if ($this.hasClass("correct-choice"))

您还需要给正确的答案一个answer-choice类，以便click事件监听器也可以使用它。您应该使用jQuery的.hasClass方法来确定单击的答案选项是否具有correct-choice类，在这种情况下，它是正确的答案。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answer-choice" id="one">answer choice 1</div>

<div class="answer-choice" id="two">answer choice 2</div>

<div class="answer-choice" id="three">answer choice 3</div>

<div class="answer-choice" id="four">answer choice 4</div>

<div class="answer-choice correct-choice" id="five">answer choice 5</div>

<script>
$(".answer-choice").on("click",
    function(event) {


        var $this = $(this);
        if ($this.hasClass("correct-choice")) {
            $this.css({
                backgroundColor: '#33ff33'
            });
            $('.answer-choice').not($this).each(function(){
                $(this).css("backgroundColor", "white");
            });

        }
        else {

            $this.css({
                backgroundColor: '#f00'
            });
            $('.correct-choice').css("backgroundColor", "white");
        }



    });
</script>

Answer 3

好吧，现在我想我明白了，试试这个：

if ($this.text() === $(".correct-choice").text())

应该可以

$ this带有.on click函数的jQuery链不起作用

3 个答案: