2
votes

Comment réparer jQuery plusieurs autres si les instructions ne fonctionnent pas

J'essaye d'exécuter cette fonction mais elle n'atteint pas la première sinon si lorsque j'atteins la taille d'écran spécifiée, elle continuera à utiliser la première if.

$(window).resize(function() {
  function removeClass() {
    $('#cookbook_add').removeClass('st-remove-label');
    $('#email_page').removeClass('st-remove-label');
  }

  function addClass() {
    $('#cookbook_add').addClass('st-remove-label');
    $('#email_page').addClass('st-remove-label');
  }

  function addRemoveLabel() {
    lastWidth = $(window).width();
    if (lastWidth < 1150) {
      console.log('1150');
      addClass();
    } else if (lastWidth < 975) {
      console.log('975');
      removeClass();
    } else if (lastWidth < 680) {
      console.log('680');
      addClass();
    } else {
      removeClass();
    }
  }
  addRemoveLabel();
});

J'attends la console se connecte pour se déclencher lorsque l'écran est de cette taille, mais ce n'est pas le cas.

javascript jquery

4 commentaires

remarque: vous pouvez probablement le faire avec une règle CSS @media ciblant ces largeurs.

Votre premier if est valide pour toutes les largeurs inférieures à 1150 donc l'exécution s'arrêtera toujours là.

@Shilly J'ai essayé ça, mais ça n'a pas fonctionné.

Vous pouvez combiner les sélecteurs $ ('# cookbook_add, #email_page'). RemoveClass ('st-remove-label') ... ou utiliser une classe.

3 Réponses :

2
votes

Vous devez spécifier une plage supérieure et inférieure à pour chacune des instructions if

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

$(window).resize(function() {
  function removeClass() {
    $('#cookbook_add').removeClass('st-remove-label');
    $('#email_page').removeClass('st-remove-label');
  }

  function addClass() {
    $('#cookbook_add').addClass('st-remove-label');
    $('#email_page').addClass('st-remove-label');
  }

  function addRemoveLabel() {
    lastWidth = $(window).width();
    if (lastWidth < 1150 && lastWidth > 975) {
      console.log('1150');
      addClass();
    } else if (lastWidth < 975 && lastWidth > 680) {
      console.log('975');
      removeClass();
    } else if (lastWidth < 680) {
      console.log('680');
      addClass();
    } else {
      removeClass();
    }
  }
  addRemoveLabel();
});

JSFiddle: https://jsfiddle.net/on0pet6g/

2 commentaires

C'est parfait. Merci de m'avoir montré comment procéder.

@MaxLoyd heureux de vous aider :-)

0
votes

Remplacez la fonction par

function addRemoveLabel() {
lastWidth = $(window).width();
if (lastWidth <= 1150 && lastWidth > 975) {
  console.log('1150');
  addClass();
} else if (lastWidth <= 975 &&lastWidth > 680) {
  console.log('975');
  removeClass();
} else if (lastWidth <= 680) {
  console.log('680');
  addClass();
} else {
  removeClass();
}

}

0 commentaires

1
votes

Le problème est que le premier if sera atteint avec n'importe quel nombre La meilleure façon est de comparer d'abord les valeurs les plus basses comme ça:

        if (lastWidth < 680) {
            console.log('680');
            addClass();
        }
        else if (lastWidth < 975) {
            console.log('975');
            removeClass();
        }
        else if (lastWidth < 1150) {
            console.log('1150');
            addClass();
        }
        else {
            removeClass();
        }

Il vous suffit de changer la commande.

0 commentaires