Manipulating list element with Jquery

Question

Manipulating list element with Jquery

Navigation

#1 by (3 votes)

1

I would like a tip to make when clicking the list, it waves the correct question and nods wrong, or just right if the person has hit,

<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Simulado Detran – Prova Teórica com Gabarito e Respostas</h2>

<div class="questao">Questão</div>

<div class="pergunta"> <p>1&ordm; Pergunta do Simulado</p>
</div>

<div class="respostas">

<div class="list-group">
  <a href="#" class="list-group-item item1" id="1" onclick="recebeResposta( this.id )"><div class="icone"></div>Resposta 1 da Primeira Pergunta</a>
			
  <a href="#" class="list-group-item item2" id="2" id="item2" onclick="recebeResposta( this.id )"><div class="icone2"></div>Resposta 2 da Primeira  Pergunta</a>
  
  <a href="#" class="list-group-item item3" id="3" onclick="recebeResposta( this.id )"><div class="icone3"></div>Resposta 3 da Primeira Pergunta</a>
  
  <a href="#" class="list-group-item item4" id="4" onclick="recebeResposta( this.id )"><div class="icone4"></div>Resposta 4 da Primeira Pergunta</a> <input type="hidden" name="resposta" id="resposta" value="4" />
</div>

<script>
//$(".list-group-item").click(function() {
//$('.item3').addClass('list-group-item-success');
//});
var qtdCarrinho = $("#resposta").val();
//alert(qtdCarrinho);

function recebeResposta(id){
	
	$('this.id').addClass('list-group-item-success');
}
</script>


</div>
</div>

javascript jquery

asked by anonymous 04.10.2017 / 05:10

1 answer

Configure URL OneSignal PHP API Amounts broken in installments, how to enter in the first to the third decimal place?

score 3 · Accepted Answer

This response is a functional template, you can customize it any way you like:

Note: I created a class .list-group-item-error as an example only to stylize the wrong items.

var qtdCarrinho = $("#resposta").val();

function recebeResposta(id){
	if(qtdCarrinho == id){
		alert("Resposta Correta!");
		$("#"+id).addClass('list-group-item-success');
	}else{
		alert("Você errou!\nA resposta correta é a "+qtdCarrinho);
		$(".list-group-item:not(.list-group-item[id="+qtdCarrinho+"])").addClass("list-group-item-error");
		$(".list-group-item[id="+qtdCarrinho+"]").addClass("list-group-item-success");
	}
  }

.list-group-item-error{
 color: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Simulado Detran – Prova Teórica com Gabarito e Respostas</h2>

<div class="questao">Questão</div>

<div class="pergunta"> <p>1&ordm; Pergunta do Simulado</p>
</div>

<div class="respostas">

<div class="list-group">
  <a href="#" class="list-group-item item1" id="1" onclick="recebeResposta( this.id )"><div class="icone"></div>Resposta 1 da Primeira Pergunta</a>
			
  <a href="#" class="list-group-item item2" id="2" id="item2" onclick="recebeResposta( this.id )"><div class="icone2"></div>Resposta 2 da Primeira  Pergunta</a>
  
  <a href="#" class="list-group-item item3" id="3" onclick="recebeResposta( this.id )"><div class="icone3"></div>Resposta 3 da Primeira Pergunta</a>
  
  <a href="#" class="list-group-item item4" id="4" onclick="recebeResposta( this.id )"><div class="icone4"></div>Resposta 4 da Primeira Pergunta</a> <input type="hidden" name="resposta" id="resposta" value="4" />
</div>