jQuery добавить / удалить класс CSS для элемента на основе выбранного радио

Question

Я пытаюсь сохранить класс с помощью localalstorage и в зависимости от того, какая радио-кнопка нажата.

Другими словами, если я нажму на второй переключатель, с data-color = "color2", чтобы добавить эти данные как класс к элементу .box и сохранить их в localalstorage. Затем, если я нажму другую кнопку, чтобы удалить все остальные классы данных и добавить только один из нажатой кнопки.

Пока у меня есть это, но не работает.

jsfiddle

<div id="colors-list">
      <label>
         <input type="radio" id="color1" name="colors-radio" value="1" checked="checked" data-color="color1">
         <span class="color1" title="color #1"></span>
      </label> 
      <label>
         <input type="radio" id="color2" name="colors-radio" value="2" data-color="color2">
         <span class="color2" title="color #2"></span>
      </label>
      <label>
         <input type="radio" id="color3" name="colors-radio" value="3" data-color="color3">
         <span class="color3" title="color #3"></span>
      </label>
      <label>
         <input type="radio" id="color4" name="colors-radio" value="4" data-color="color4">
         <span class="color4" title="color #4"></span>  
      </label>      
   </div>

JQuery :

   $(document).ready(function () {
             var csscol = localStorage["activecol"];
          if (csscol) {
              $('.box').addClass(csscol);
          }
           localStorage.setItem('activecol', $(this).data('color'));        
        return false;

   $('#colors-list [type="radio"]').on("change", function() {

        if($(this).is(":checked")) {
            $('.box').removeClass($(this).data('color'));
        } else {
            $('.box').addClass($(this).data('color'));
        }

    });
});

CSS :

.color1 {
    background: #aaaaaa;
}
.color1 {
    background: #888888;
}
.color1 {
    background: #555555;
}
.color1 {
    background: #222222;
}
#colors-list{
    padding: 80px;
}
.box{
  width: 100px;
  height: 100px;
  background: #eee;
  margin: 50px;
  margin-top: 0;
  margin-left: 80px;
}

jquery html local-storage

0

COS 17 Авг 2019 в 20:43

Answer 1

Ваш код немного запутался. Вы повторили уроки .color1 и другие ...

Скрипка здесь.

Обновленный код следует:

var csscol = localStorage["activecol"];
if (csscol != undefined) {
    $('.box').addClass(csscol);
}

$('#colors-list [type="radio"]').on("change", function (e) {
    var color = $(this).data('color');

    localStorage.setItem('activecol', color);

    $('.box').removeClass('color1 color2 color3 color4').addClass(color);
});

.box.color1 {
    background: #aaaaaa;
}
.box.color2 {
    bbackground: #888888;
}
.box.color3 {
    background: #555555;
}
.box.color4 {
    background: #222222;
}
#colors-list {
    padding: 80px;
}
.box {
    width: 100px;
    height: 100px;
    background: #eee;
    margin: 50px;
    margin-top: 0;
    margin-left: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="colors-list">
    <label>
        <input type="radio" id="color1" name="colors-radio" value="1" checked="checked" data-color="color1">
        <span class="color1" title="color #1"></span>
    </label>
    <label>
        <input type="radio" id="color2" name="colors-radio" value="2" data-color="color2">
        <span class="color2" title="color #2"></span>
    </label>
    <label>
        <input type="radio" id="color3" name="colors-radio" value="3" data-color="color3">
        <span class="color3" title="color #3"></span>
    </label>
    <label>
        <input type="radio" id="color4" name="colors-radio" value="4" data-color="color4">
        <span class="color4" title="color #4"></span>
    </label>
</div>
<div class="box"></div>

1

gaetanoM 17 Авг 2019 в 18:41

Answer 2

У вас есть несколько проблем в вашем коде:

Прежде всего, имена классов для ваших цветов совпадают с 'color1'. Во-вторых, что означает «вернуть ложь»; делать?

Тогда:

localStorage.setItem('activecol', $(this).data('color'));

Ничего не делает, так как «$ (this)» не указывает на ваш радиовход.

Также логика добавления / удаления классов не добавляет / не удаляет нужный класс в / из вашего бокса.

Вот что я придумаю. Его общее решение, так что количество переключателей / цветов не меняет вашу логику JS, в качестве бонуса я добавил код для восстановления выбранного входа из локального хранилища:

$(document).ready(function () {
    let csscol = localStorage["activecol"];
    let $box = $('.box');
    //save original classes
    $box.data('initial-classes', $box.attr('class'));

    if (csscol) {
      $box.addClass(csscol);

      // Restore checkbox as well
      $('#colors-list [type="radio"][data-color="'+ csscol +'"]').attr("checked",true);
    }

   $('#colors-list [type="radio"]').on("change", function() {
        let $this = $(this);  

        if($this.is(":checked")) {
          //Replace all classes with initial box classes
          $box.attr('class', $box.data('initial-classes'));
          $box.addClass($this.data('color'));

          localStorage.setItem('activecol', $this.data('color'));  
        }

    });
});

Ознакомьтесь с демонстрацией здесь.

0

Mohsen 17 Авг 2019 в 19:08

jQuery добавить / удалить класс CSS для элемента на основе выбранного радио

2 ответа

Похожие вопросы

Новые вопросы

jquery