There is a button, when clicked, it changes color.
Tell me how to save these changes?

Html:

<span id="like" class="glyphicon glyphicon-thumbs-up"></span> <span id="dislike" class="glyphicon glyphicon-thumbs-down"></span>

Javascript:

 $(document).ready(function(){ $("#like").click(function(){ $("#like").addClass("green"); $("#dislike").removeClass("red"); }); }); $(document).ready(function(){ $("#dislike").click(function(){ $("#dislike").addClass("red"); $("#like").removeClass("green"); }); });

    3 answers 3

    For example, use local storage

     // пишСм localStorage.setItem("someVal", "val"); // Ρ‡ΠΈΡ‚Π°Π΅ΠΌ console.log( "someVal = " + localStorage.getItem("someVal"));
    • I am new to JavaScriptim working recently. Please tell me how to implement it on your code. - Samandar Isakov
    • I did not see your code, and I wrote how to use it in any code. - Vyacheslav Danshin
    • <span id = "like" class = "glyphicon glyphicon-thumbs-up"> </ span> <span id = "dislike" class = "glyphicon glyphicon-thumbs-down"> </ span> - Samandar Isakov
    • <script type = "text / javascript"> $ (document). ready (function () {$ ("# like"). click (function () {$ ("# like"). addClass ("green"); $ ("# dislike"). removeClass ("red"); - Samandar Isakov
    • Could you arrange it in the question? - Vyacheslav Danshin
     $(document).ready(function(){ var stage = localStorage.getItem("stage"); if(stage){ $("#like").addClass("green"); $("#dislike").removeClass("red"); }else{ $("#dislike").addClass("red"); $("#like").removeClass("green"); } $("#like").click(function(){ $("#like").addClass("green"); $("#dislike").removeClass("red"); localStorage.setItem("stage", true); }); $("#dislike").click(function(){ $("#dislike").addClass("red"); $("#like").removeClass("green"); localStorage.setItem("stage", false); }); });

      Using localStorage , as suggested above, the implementation will look something like this:

      HTML:

       <span class="vote"> <span data-action="like" class="glyphicon glyphicon-thumbs-up"></span> <span data-action="dislike" class="glyphicon glyphicon-thumbs-down"></span> </span>

      Js:

       $(document).ready(function() { /* Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ состояниС: -1 дислайк 0 ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ (Π±Π΅Π· голоса) 1 Π»Π°ΠΉΠΊ */ var state = localStorage.getItem('liked'); // элСмСнт, содСрТащий ΠΊΠ½ΠΎΠΏΠΊΠΈ var elClass = '.vote'; // Π»Π°ΠΉΠΊ: мСняСм стили ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅ΠΌ liked:1 Π² Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ var like = function like() { localStorage.setItem('liked', 1); var $el = $(elClass); $el.find('[data-action="like"]').addClass('green'); $el.find('[data-action="dislike"]').removeClass('red'); }; // дислайк: мСняСм стили ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅ΠΌ liked:-1 Π² Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π΅ var dislike = function dislike() { localStorage.setItem('liked', -1); var $el = $(elClass); $el.find('[data-action="like"]').removeClass('green'); $el.find('[data-action="dislike"]').addClass('red'); }; // устанавливаСм Π»Π°ΠΉΠΊ ΠΈΠ»ΠΈ дислайк ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы if (state == 1) { like(); } else if (state == -1) { dislike(); } // событиС Π½Π° Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π»Π°ΠΉΠΊΠ° ΠΈΠ»ΠΈ дислайка $(elClass + ' span').click(function () { var action = $(this).data('action'); action === 'like' ? like() : dislike(); }); });

      Using this approach, you can easily organize "Like / Dislike" for several entities at once.