如何創建一個標記作爲被接受的系統答案？

說明：我試圖做一個公認的對講系統，有三種情況：如何創建一個標記作爲被接受的系統答案？

標誌着一個新的答案，接受一個（已經不存在公認的答案）
撤消一個公認的答案
從一個答案切換到另一個

這裏是我的代碼：

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

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

但是當你看到我的代碼不能正常工作。我該如何解決它？

注：我的整個問題都是關於着色。

來源

2016-07-30 stack

可以請你告訴我，我的問題已獲得downvote？ – stack

首先你的代碼拋出錯誤，因爲你在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>

來源

2016-07-30 21:13:02

我很慚愧，我再次給你打電話。但是看，我的代碼在現實中是非常不同的。它就像[this]（https://jsfiddle.net/dcaqkpkp/）。注意我**應該在'.on（'click'...''''上使用'.l_acceptedanswer'類，請問我該如何解決它？ – stack

沒問題，在這種情況下， find（）''.l_acceptedanswer'中的'fa-check'元素。試試這個：https://jsfiddle.net/dcaqkpkp/1/ –

使用此方法

function click_div(div) { 
 

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

 
}

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

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

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

來源

2016-07-30 21:39:43

你的方法不支持** undo **。 – stack

如何創建一個標記作爲被接受的系統答案？

回答

相關問題