Question

说明：我试图建立一个接受答案的系统，有三种情况：

将新答案标记为已接受的答案（尚未接受答案）
撤消已接受的答案
从一个答案切换到另一个答案

这是我的代码：

＆＃13;

$("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
  }
	
});

＆＃13;

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

＆＃13;

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

＆＃13;

但是当你看到我的代码不起作用时。我该如何解决？

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

Answer 1

首先，当你引用dQuerylement而不是jQuery对象时，你在this上调用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>

Answer 2

使用此方法

＆＃13;

function click_div(div) {

$("#main_div div .fa-check").css("color"," #aaa"); 
$("#"+div+" .fa-check").css("color"," #44b449");

}

＆＃13;

#div_1,#div_2,#div_3
{
width:100%;
height:100px;
}
.fa-check{
  color:#aaa;
  cursor: pointer;
}

.fa-check:hover{
  color: #999;
}

＆＃13;

<html>
<head>
<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>

</head>

<div id="main_div">
<div id="div1" onclick="click_div('div1')">
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>

</div>
<hr>
<div id="div2" onclick="click_div('div2')">
<p>answer2</p>
<i class="fa fa-check" aria-hidden="true" style="color: #44b449;"></i>
</div>
<hr>
<div id="div3" onclick="click_div('div3')">
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
</div>
</html>

＆＃13;

如何创建标记答案作为可接受的系统？

2 个答案: