ページをリロードしないでクリックイベントのCSSを追加

Question

ここに私のスクリプトです、私は5つの画像を追加してsubmit.whenをクリックして送信します、その画像が訪問した場合はマークを表示しますそうでなければ十字マークを表示します。私の疑いは、ページをリロードせずに十字マークをつけた画像をもう一度クリックすると、十字マークの代わりに目盛りを表示する必要があります。出来ますか？

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

Answer 1

チェックこれは：これはセキュリティ上のリスクであり、多くのブラウザがサポートを削除するよう、visited`：

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

Answer 2

クッキーまたはローカルストレージを使用できます。ローカルストレージを使用して、私はあなたのためにこれを持っている：セキュリティ上の理由に

$(function() { 
 
    localStorage["images"] = localStorage["images"] || "[]"; 
 
    var myImages = JSON.parse(localStorage["images"]); 
 
    $(myImages.join(", ")).attr("src", "//placehold.it/150/ccf?text=Visited"); 
 
    $("img").click(function() { 
 
    if (typeof localStorage != "undefined") { 
 
     myImages.push("." + this.className); 
 
     localStorage["images"] = JSON.stringify(myImages); 
 
     $(this).attr("src", "//placehold.it/150/ccf?text=Visited"); 
 
    } 
 
    }); 
 
});

* {margin: 0; padding: 0; list-style: none;} 
 
ul li {display: inline-block;}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<ul> 
 
    <li><img src="//placehold.it/150?text=Unvisited" class="img-1" /></li> 
 
    <li><img src="//placehold.it/150?text=Unvisited" class="img-2" /></li> 
 
    <li><img src="//placehold.it/150?text=Unvisited" class="img-3" /></li> 
 
    <li><img src="//placehold.it/150?text=Unvisited" class="img-4" /></li> 
 
    <li><img src="//placehold.it/150?text=Unvisited" class="img-5" /></li> 
 
</ul>

は、スタックスニペットの出力をサンドボックス化されています。 JSBinにご確認ください。参照用