Флажок Включить / отключить DIV - Localstorage - Onload загрузить статус - PullRequest
Новая
       14

Флажок Включить / отключить DIV - Localstorage - Onload загрузить статус

0 голосов
/ 19 декабря 2018

Я использую этот тип флажка в моем index.html: 

<input class="check-1" type="checkbox" value="1" id="check-1"/>

Этот код в моем .js 

$(".Categorie.1").show();
$(".check-1").click(function() {
    if($(this).is(":checked")) {
        $(".Categorie.1").hide();
    } else {
        $(".Categorie.1").show();
    }
});

//localstorage
$('input[type="checkbox"]').each(function(){
    $(this).prop('checked', (localStorage.getItem($(this).attr('id')) === 'true') ? 'checked' : '')
});

$('input[type="checkbox"]')  
  .on('change', function() {
    localStorage.setItem($(this).attr('id'), this.checked);
    if (this.checked) {
      $('.' + $(this).data('target')).show();
    } else {
      $('.' + $(this).data('target')).hide();
    }
  })
  .trigger('change');

Когда я загружаю страницу, нет проблем, флажки, которыепроверены все еще отмечены.Но появляется DIV ...

Есть решение для решения этой проблемы?

Кстати, я думаю, что код довольно тяжелый.Можно ли сделать более компактную версию?

Большое спасибо всем: -)

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Вот более полный код.

Процесс сохранения в порядке.Обновить, флажки всегда отмечены.

Но если вы установите флажок для удаления красного или другого, после обновления DIV вернутся.

Спасибо; -) 

$("input[type=checkbox]").each(function() {
  var name = $(this).attr('name');

  if (localStorage.getItem(name) == "true") {
    $(this).prop('checked', true);
  }
});

$("input[type=checkbox]").change(function() {

  var name = $(this).attr('name'),
    value = $(this).is(':checked');
  localStorage.setItem(name, value);
});

$('.togglebox').change(function () {
    $("."+this.value).toggleClass('hide');
});
.one {
    background: red;
}
.two {
    background: green;
}
.three {
    background: blue;
}
.four {
    background: black;
}
.hide {
    display: none;
}
<input class="togglebox" id="one-box" type="checkbox" name="boxes1" value="one" >First
<input class="togglebox" id="two-box" type="checkbox" name="boxes2" value="two" >Second
<input class="togglebox" id="three-box" type="checkbox" name="boxes3" value="three" >Third
<input class="togglebox" id="four-box" type="checkbox" name="boxes4" value="four" >Fourth
<div style="width: 300px; height: 100px;" class="one"></div>
<div style="width: 300px; height: 100px;" class="two"></div>
<div style="width: 300px; height: 100px;" class="three"></div>
<div style="width: 300px; height: 100px;" class="four"></div>
0 голосов
/ 19 декабря 2018 

//fake out the localStorage for StackOverflow
var fakeLocalStorage = {
  getItem: function ( key ) {
    if ( key === 'check-1' ) {
      return 'true';
    }
    
    return null;
  }
};

$('.check-1').on('change', function() {
    if (this.checked) {
        $(".Categorie.1").hide();
    } else {
        $(".Categorie.1").show();
    }
});

$('input:checkbox').each(function(){
    var originalValue = this.checked;
    
    this.checked = fakeLocalStorage.getItem(this.id) === 'true';
    
    // Changing the value of the checked logically does not generate
    // an event.  If you want to force the change listener to execute
    // due to your change, you can logically trigger the event
    if (originalValue != this.checked) $(this).trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="check-1" type="checkbox" value="1" id="check-1">
<div class="Categorie 1">Show Me!</div>
...