Aqui está o meu roteiro, adicionei 5 imagens e o botão enviar. Quando clico em enviar, se essa imagem tiver visitado a classe, ela mostrará uma marca de seleção, caso contrário, mostrarei uma cruz. Agora minha dúvida é quando eu clico novamente nas imagens que tem uma cruz marcar sem recarregar a página, eu tenho que exibir uma marca de verificação em vez de uma cruz. É possível?
$(document).ready(function() {
$(".img").click(function() {
$(this).addClass("visited");
});
});
function validate() {
$(".img").each(function() {
$(this).after($(this).hasClass("visited") ? $(this).next().addClass("fa-check icon") : $(this).next().addClass("fa-times cross"));
$(".fa").show();
});
return true;
}
verifique isso para referência:
$(document).ready(function() {
$("img").click(function() {
$(this).toggleClass("visited");
});
});
function validate() {
$("img").each(function() {
$(this).hasClass("visited") ?
$(this).next().text("v") :
$(this).next().text("x");
});
return false;
}img{
border:1px #00FF00 solid;
margin:5px;
width:100px;
}
.visited{
border:1px #FF0000 solid;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img src="http://www.gstatic.com/webp/gallery/1.jpg"/>
<span></span>
<img src="http://www.gstatic.com/webp/gallery/2.jpg"/>
<span></span>
<img src="http://www.gstatic.com/webp/gallery/3.jpg"/>
<span></span>
<br/>
<img src="http://www.gstatic.com/webp/gallery/4.jpg"/>
<span></span>
<img src="http://www.gstatic.com/webp/gallery/5.jpg"/>
<span></span>
<br/>
<button type="button" onclick="validate()">Validate</button>Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras