J'ai fait deux boutons pour changer le rembourrage sur mon site Web. Ils fonctionnent, mais je dois définir manuellement le remplissage pour la navigation, le main et le pied de page dans le CSS. Voici le code:

main {
    padding: 20px 25%;
}
footer {
    padding: 5px 25%;
}
nav {
    padding: 0 25%;
}
    var padding = 15;

    $('#paddingPlus').click(function() {
        switch(padding) {
            case 0:
                changePadding(5);
                padding = 5;
                break;
            case 5:
                changePadding(10);
                padding = 10;
                break;
            case 10:
                changePadding(15);
                padding = 15;
                break;
            case 15:
                changePadding(20);
                padding = 20;
                break;
            case 20:
                changePadding(25);
                padding = 25;
                break;
            case 25:
                changePadding(30);
                padding = 30;
                break;
            case 30:
                alert('You have reached the maximum ammount of padding!');
                break;
        }
    });

    $('#paddingMinus').click(function() {
        switch(padding) {
            case 0:
                alert('You have reached the minimum ammount of padding!');
                break;
            case 5:
                changePadding(0);
                padding = 0;
                break;
            case 10:
                changePadding(5);
                padding = 5;
                break;
            case 15:
                changePadding(10);
                padding = 10;
                break;
            case 20:
                changePadding(15);
                padding = 15;
                break;
            case 25:
                changePadding(20);
                padding = 20;
                break;
            case 30:
                changePadding(25);
                padding = 25;
                break;
        }
    });

    function changePadding(pad) {
        $('nav').css('padding', '0 ' + pad + '%');
        $('main').css('padding', '20px ' + pad + '%');
        $('footer').css('padding', '5px ' + pad + '%');
    }

J'ai essayé de le faire avec localstorage pour qu'il enregistre le rembourrage, mais cela ne fonctionne pas et chrome ne me montre aucun message d'erreur. Voici le code:

main { }
footer { }
nav { }
    switch(localStorage.getItem('padding')) {
        case 0:
            changePadding(0);
            localStorage.setItem('padding', 0);
            break;
        case 5:
            changePadding(5);
            localStorage.setItem('padding', 5);
            break;
        case 10:
            changePadding(10);
            localStorage.setItem('padding', 10);
            break;
        case 15:
            changePadding(15);
            localStorage.setItem('padding', 15);
            break;
        case 20:
            changePadding(20);
            localStorage.setItem('padding', 20);
            break;
        case 25:
            changePadding(25);
            localStorage.setItem('padding', 35);
            break;
        case 30:
            changePadding(30);
            localStorage.setItem('padding', 30);
            break;
        default:
            changePadding(15);
            localStorage.setItem('padding', 15);
    }

    $('#paddingPlus').click(function() {
        switch(localStorage.getItem('padding')) {
            case 0:
                changePadding(5);
                localStorage.setItem('padding', 5);
                break;
            case 5:
                changePadding(10);
                localStorage.setItem('padding', 10);
                break;
            case 10:
                changePadding(15);
                localStorage.setItem('padding', 15);
                break;
            case 15:
                changePadding(20);
                localStorage.setItem('padding', 20);
                break;
            case 20:
                changePadding(25);
                localStorage.setItem('padding', 25);
                break;
            case 25:
                changePadding(30);
                localStorage.setItem('padding', 30);
                break;
            case 30:
                alert('You have reached the maximum ammount of padding!');
                break;
        }
    });

    $('#paddingMinus').click(function() {
        switch(localStorage.getItem('padding')) {
            case 0:
                alert('You have reached the minimum ammount of padding!');
                break;
            case 5:
                changePadding(0);
                localStorage.setItem('padding', 0);
                break;
            case 10:
                changePadding(5);
                localStorage.setItem('padding', 5);
                break;
            case 15:
                changePadding(10);
                localStorage.setItem('padding', 10);
                break;
            case 20:
                changePadding(15);
                localStorage.setItem('padding', 15);
                break;
            case 25:
                changePadding(20);
                localStorage.setItem('padding', 20);
                break;
            case 30:
                changePadding(25);
                localStorage.setItem('padding', 25);
                break;
        }
    });

    function changePadding(pad) {
        $('nav').css('padding', '0 ' + pad + '%');
        $('main').css('padding', '20px ' + pad + '%');
        $('footer').css('padding', '5px ' + pad + '%');
    }

J'apprécierais vraiment que quelqu'un puisse me dire où est mon erreur. Merci d'avance

0
Berkutschi 5 mai 2020 à 18:52

3 réponses

Meilleure réponse

Pour développer la réponse précédente, cela aide-t-il?

$('#paddingPlus').click(function() {
   let padding = parseInt(localStorage.getItem('padding'));
   if (padding >== 30) {
      alert('You have reached the maximum ammount of padding!');
   } else {
      padding += 5;
      changePadding(padding);
   }
}


$('#paddingMinus').click(function() {
   let padding = parseInt(localStorage.getItem('padding'));
   if (padding === 0) {
      alert('You have reached the minimum ammount of padding!');
   } else {
      padding -= 5;
      changePadding(padding);
   }
}

function changePadding(pad) {
        localStorage.setItem('padding', pad);
        $('nav').css('padding', '0 ' + pad + '%');
        $('main').css('padding', '20px ' + pad + '%');
        $('footer').css('padding', '5px ' + pad + '%');
}
1
Guy Joseph 5 mai 2020 à 16:09

Essayez de convertir un remplissage que vous obtenez de localStorage.getItem('padding') en Number (c'est-à-dire parseInt(localStorage.getItem('padding'))). Lorsque vous recevez un article de localstorage, il renvoie un String donc votre case ne fonctionne pas.

1
strelok2010 5 mai 2020 à 15:57

Le problème est en partie dû à la contrainte de type d'une chaîne à un entier lors du traitement de la valeur pad et également au fait que votre deuxième exemple de code ne met pas à jour la valeur localStorage.

Vous pouvez résoudre ces deux problèmes et simplifier le code en ajoutant simplement à la valeur de chaque gestionnaire d'événements au lieu d'utiliser l'instruction switch, et également en lisant la valeur de localStorage au lieu de vous fier au global variable. Essaye ça:

<nav>Navigation</nav>
<main>Main content</main>
<footer>Footer</footer>

<button class="padding" data-change="5">+</button>
<button class="padding" data-change="-5">-</button>
function setPadding(pad, change) {
  pad = pad == null ? 15 : parseInt(pad, 10);
  pad += (parseInt(change, 10) || 0);

  if (pad < 0) {
    alert('You have reached the minimum ammount of padding!');
    return;
  }

  if (pad > 30) {
    alert('You have reached the minimum ammount of padding!');
    return;
  }

  localStorage.setItem('padding', pad);
  $('nav').css('padding', '0 ' + pad + '%');
  $('main').css('padding', '20px ' + pad + '%');
  $('footer').css('padding', '5px ' + pad + '%');
}

// retrieve the value and set when the page loads
setPadding(localStorage.getItem('padding'));

// update the value when either button is clicked
$('.padding').click(function() {{
  setPadding(localStorage.getItem('padding'), this.dataset.change);
});

Voici un exemple concret de cela dans un jsFiddle , car les extraits de code SO ne peuvent pas accéder à localStorage.

1
Rory McCrossan 5 mai 2020 à 16:12