Determine the desired class and replace it.

Question

In general, there is a block that has two classes, for example, it looks like this:

<div class="block class-A class-1"></div>

The script can change the first and second class, only we can “change” it like this:

 class-A -> class-A || class-B class-1 -> class-1 || class-2 || class-3 || class-4

The script for the change looks like this:

 $('#changeOneClass').bind('change',function(){ var thisValue = $(this).val(); if(thisValue=='class-A') $('.block') .removeClass('class-B') .addClass('class-A'); else if(thisValue=='class-B') $('.block') .removeClass('class-A') .addClass('class-B'); }); $('#changeOneClass').bind('change',function(){ var oldThisValue = '', thisValue = $(this).val(); // Вот тут уже сталкнулся с проблемой, которую хочу решить в вопросе. // Суть в том, что у меня реализованно "изменение" по другому, у меня ещё есть переменная "oldThisValue" - она является прошлым значением и потом получается так: $('.block') .removeClass(oldThisValue) .addClass(thisValue); });

 .block {display: block; width: 100px; height: 100px; border: 3px solid transparent;} .class-A {background: red;} .class-B {background: blue;} .class-1 {border-color: yellow;} .class-2 {border-color: green;} .class-3 {border-color: gray;} .class-4 {border-color: violet;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="block class-A class-1"></div> <select id="changeOneClass"> <option>class-A</option> <option>class-B</option> </select> <select id="changeTwoClass"> <option>class-1</option> <option>class-2</option> <option>class-3</option> <option>class-4</option> </select>

The bottom line is that this change works with LocalStorage and when it boots up it connects.
With the first option ( class-A || class-B ) is easier, I just check LocalStorage == class-A - then I delete class-B and put class-A

And what about the second option, where there are more choices?
Only an array with class-1, class-2, class-3, class-4 comes to mind, then check there is something in .block and if there is, then delete this class and add another one from LocalStorage.

Important : it is likely that .block will have some other classes besides class-A and class-1 .

Accepted Answer · 2018-12-12T21:40:25

I did not understand what this is for LocalStorage .

 $('#changeOneClass,#changeTwoClass').change(function() { $(this).find("option").each(function() { $('.block').removeClass($(this).val()); }); $('.block').addClass($(this).val()); localStorage.setItem(this.id, this.value); }); window.addEventListener("load", function() { var v; v = localStorage.getItem("changeOneClass"); if (v) $("#changeOneClass").val(v); $("#changeOneClass").change(); v = localStorage.getItem("changeTwoClass"); if (v) $("#changeTwoClass").val(v); $("#changeTwoClass").change(); });

 .block { display: block; width: 100px; height: 100px; border: 3px solid transparent; } .class-A { background: red; } .class-B { background: blue; } .class-1 { border-color: yellow; } .class-2 { border-color: green; } .class-3 { border-color: gray; } .class-4 { border-color: violet; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="block class-A class-1"></div> <select id="changeOneClass"> <option>class-A</option> <option>class-B</option> </select> <select id="changeTwoClass"> <option>class-1</option> <option>class-2</option> <option>class-3</option> <option>class-4</option> </select>

I'm sure you know what LocalStorage does, and so, in my case, it saves the classes for this block and when the page is updated, they are loaded as they were before.
The problem is that I can load class-A , because there it is easier to "check" which class to replace (example in question), but it is harder for me to understand class-1 , because there are more of them.
When reading, call .val(...) for both selects with corresponding read values.
Tipo setLocalStorage('bla-bla','class-A class-1') and accepting this to put in .block ?
In general, okay, the head does not boil, but it did it differently and got what it wanted: D Thanks for the help, I

Determine the desired class and replace it.

1 answer 1

More articles: