javascript - 如何创建一个将答案标记为已接受的系统？

Question

说明:我正在尝试制作一个接受的答案系统，并且存在三种情况:

• 将一个新答案标记为已接受的答案(目前还没有被接受的答案)
• 撤消已接受的答案
• 从一个答案切换到另一个

这是我的代码:

$("body").on('click', '.fa-check', function(e) {

  // send a request by ajax and if it is successful then
  
  if( this.attr('color') == '#44b449' ){ // undo
    this.css({"color":"#aaa"}); // set gry color to marked icon
  } else { // switchin or marking a new one
    $('.fa-check').css({"color":"#aaa"}); // set gray color to all icons
    this.css({"color":"#44b449"}); // set green color to marked icon
  }
	
});

.fa-check{
  color:#aaa;
  cursor: pointer;
}

.fa-check:hover{
  color: #999;
}

<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
<hr>
<p>answer2</p>
<i class="fa fa-check" aria-hidden="true" style="color: #44b449;"></i>
<hr>
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>

但是如您所见，我的代码不起作用。我该如何解决？

注意:我的整个问题都是关于着色的。

Answer 1

首先，当您在 this 上调用 jQuery 方法时，当它引用 DOMElement 而不是 jQuery 对象时，您的代码会抛出错误。

要解决您的问题，您可以使用类而不是应用内联 CSS 样式来简化您的逻辑。这使您可以通过单击 .fa-check 元素简单地切换类。试试这个:

$("body").on('click', '.fa-check', function(e) {
  // send a request by ajax and if it is successful then
  
  $('.fa-check').not(this).removeClass('checked');
  $(this).toggleClass('checked');
});

.fa-check {
  color: #aaa;
  cursor: pointer;
}

.fa-check.checked {
  color: #44b449;
}

<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
<hr>
<p>answer2</p>
<i class="fa fa-check checked" aria-hidden="true"></i>
<hr>
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>