Çerezleri kullanarak geçiş durumunu + sınıf geçişini kaydetme

Tıklandığında içeriği gösteren yaklaşık 4 düğmem var

$(function() {
  $(".hidden").hide();

  $('.button').on('click', function() {
       var circle = $(this).attr('data-circle');
       $('.'+circle).toggle();
       $(this).find('i').toggleClass('fa-minus fa-plus');
    });
});

Benim html

<button class="button" data-circle="biographies">
     biographies
</button>

<button class="button" data-circle="pictures">
     pictures
</button>

<button class="button" data-circle="poetry">
     poetry
</button>

<div class="biographies hidden">content</div>
<div class="pictures hidden">content</div>
<div class="poetry hidden">content</div>

İçerik gizlidir, çünkü her tıklandığında ortaya çıkarmak istiyorum, gördüğünüz gibi harika fontu da kullanıyorum ve bu, içeriğin görünür olduğu durumlarda bana artı işareti ve gizlendiğinde eksi işareti veriyor.

Hem içerik hem de simge sınıfının geçiş durumunu nasıl kaydedebilirim?

http://jsfiddle.net/hv4aywa4/

1

6 cevap

Go here for a straightforward tutorial on cookies: http://www.w3schools.com/js/js_cookies.asp

JS'nize aşağıdaki işlevleri ekleyin (elbette, uyarı bildirimlerini kaldırmak için bunları hafifçe değiştirin): setCookie() ve getCookie ()

Ardından, sayfa yüklendiğinde, "getCookie ('toggleStatus')" kullanarak çerezin zaten mevcut olup olmadığını kontrol edin (çerezin "toggleStatus" adını verdiğinizi farz ediyorum). Eğer yoksa, kullanmak istediğiniz kadarını oluşturun:

setCookie('toggleStatus','hidden', 30);
setCookie('toggleStatus2','hidden', 30); 

vb....

Zaten varsa, düğmelerin durumunu uygun şekilde güncelleyin.

Ardından her bir düğmeye tıkladığınızda, çerezlerin mevcut değerini kontrol edin ve uygun şekilde güncelleyin:

if(getCookie('toggleStatus') === 'hidden') {    
    setCookie('toggleStatus', 'show', 30);
} else {
    setCookie('toggleStatus', 'hidden', 30);
}

Bu yazım hatası olabilir veya olmayabilir denenmemiş bir cevaptır :)

1
katma

Go here for a straightforward tutorial on cookies: http://www.w3schools.com/js/js_cookies.asp

JS'nize aşağıdaki işlevleri ekleyin (elbette, uyarı bildirimlerini kaldırmak için bunları hafifçe değiştirin): setCookie() ve getCookie ()

Ardından, sayfa yüklendiğinde, "getCookie ('toggleStatus')" kullanarak çerezin zaten mevcut olup olmadığını kontrol edin (çerezin "toggleStatus" adını verdiğinizi farz ediyorum). Eğer yoksa, kullanmak istediğiniz kadarını oluşturun:

setCookie('toggleStatus','hidden', 30);
setCookie('toggleStatus2','hidden', 30); 

vb....

Zaten varsa, düğmelerin durumunu uygun şekilde güncelleyin.

Ardından her bir düğmeye tıkladığınızda, çerezlerin mevcut değerini kontrol edin ve uygun şekilde güncelleyin:

if(getCookie('toggleStatus') === 'hidden') {    
    setCookie('toggleStatus', 'show', 30);
} else {
    setCookie('toggleStatus', 'hidden', 30);
}

Bu yazım hatası olabilir veya olmayabilir denenmemiş bir cevaptır :)

1
katma

Go here for a straightforward tutorial on cookies: http://www.w3schools.com/js/js_cookies.asp

JS'nize aşağıdaki işlevleri ekleyin (elbette, uyarı bildirimlerini kaldırmak için bunları hafifçe değiştirin): setCookie() ve getCookie ()

Ardından, sayfa yüklendiğinde, "getCookie ('toggleStatus')" kullanarak çerezin zaten mevcut olup olmadığını kontrol edin (çerezin "toggleStatus" adını verdiğinizi farz ediyorum). Eğer yoksa, kullanmak istediğiniz kadarını oluşturun:

setCookie('toggleStatus','hidden', 30);
setCookie('toggleStatus2','hidden', 30); 

vb....

Zaten varsa, düğmelerin durumunu uygun şekilde güncelleyin.

Ardından her bir düğmeye tıkladığınızda, çerezlerin mevcut değerini kontrol edin ve uygun şekilde güncelleyin:

if(getCookie('toggleStatus') === 'hidden') {    
    setCookie('toggleStatus', 'show', 30);
} else {
    setCookie('toggleStatus', 'hidden', 30);
}

Bu yazım hatası olabilir veya olmayabilir denenmemiş bir cevaptır :)

1
katma

Bir dost redditor bu konuda yardımcı oldu ve yerel depo kullanmamı önerdi, işte kimse cevap istiyorsa

var localStorageKey = "app_state";

// to preserve state, you first need to keep track of it
  var default_state = {
  biographies: false,
  pictures: false,
  poetry: false
 }

 var saved_state = localStorage.getItem(localStorageKey);

//ternary operator which means if `saved_state` evaluates to `true` we parse it and use that value for `state`; otherwise use `default_state`
var state = saved_state ? JSON.parse(saved_state) : default_state;

 $(function() {
   init();

 $('.button').on('click', function() {
    var circle = $(this).attr('data-circle');
    toggleCircle(circle, !state[circle]);
    $(this).find('i').toggleClass('fa-minus fa-plus');
 });



function init() {
  for(var key in state) {
     var is_displayed = state[key];
     console.log(});is_displayed);
    toggleCircle(key, is_displayed);
  }
}

function toggleCircle(circle, is_displayed) {
if (is_displayed) {
    $('.'+circle).show()
    state[circle] = true;
} else {
    $('.'+circle).hide()
    state[circle] = false;
}

localStorage.setItem(localStorageKey, JSON.stringify(state));
}
1
katma

Bir dost redditor bu konuda yardımcı oldu ve yerel depo kullanmamı önerdi, işte kimse cevap istiyorsa

var localStorageKey = "app_state";

// to preserve state, you first need to keep track of it
  var default_state = {
  biographies: false,
  pictures: false,
  poetry: false
 }

 var saved_state = localStorage.getItem(localStorageKey);

//ternary operator which means if `saved_state` evaluates to `true` we parse it and use that value for `state`; otherwise use `default_state`
var state = saved_state ? JSON.parse(saved_state) : default_state;

 $(function() {
   init();

 $('.button').on('click', function() {
    var circle = $(this).attr('data-circle');
    toggleCircle(circle, !state[circle]);
    $(this).find('i').toggleClass('fa-minus fa-plus');
 });



function init() {
  for(var key in state) {
     var is_displayed = state[key];
     console.log(});is_displayed);
    toggleCircle(key, is_displayed);
  }
}

function toggleCircle(circle, is_displayed) {
if (is_displayed) {
    $('.'+circle).show()
    state[circle] = true;
} else {
    $('.'+circle).hide()
    state[circle] = false;
}

localStorage.setItem(localStorageKey, JSON.stringify(state));
}
1
katma

Bir dost redditor bu konuda yardımcı oldu ve yerel depo kullanmamı önerdi, işte kimse cevap istiyorsa

var localStorageKey = "app_state";

// to preserve state, you first need to keep track of it
  var default_state = {
  biographies: false,
  pictures: false,
  poetry: false
 }

 var saved_state = localStorage.getItem(localStorageKey);

//ternary operator which means if `saved_state` evaluates to `true` we parse it and use that value for `state`; otherwise use `default_state`
var state = saved_state ? JSON.parse(saved_state) : default_state;

 $(function() {
   init();

 $('.button').on('click', function() {
    var circle = $(this).attr('data-circle');
    toggleCircle(circle, !state[circle]);
    $(this).find('i').toggleClass('fa-minus fa-plus');
 });



function init() {
  for(var key in state) {
     var is_displayed = state[key];
     console.log(});is_displayed);
    toggleCircle(key, is_displayed);
  }
}

function toggleCircle(circle, is_displayed) {
if (is_displayed) {
    $('.'+circle).show()
    state[circle] = true;
} else {
    $('.'+circle).hide()
    state[circle] = false;
}

localStorage.setItem(localStorageKey, JSON.stringify(state));
}
1
katma