Le code se rompt lors de la mise à jour de jQuery en raison de changements de bascule

Contexte

J’ai récemment pris en charge le développement d’un projet d’un programmeur qui utilisait plusieurs versions de jquery de 1.3x à 1.6x … Maintenant que j’ai implémenté des fonctionnalités avancées, certaines fonctions sont en train de tomber en panne … Dernièrement, il s’agit d’un la zone d’affichage des instructions, qui comporte une icône, et qui, une fois cliquée, glisse le long du conteneur pour expliquer les instructions. Bien que je pense que le meilleur résultat serait simplement de réécrire le jQuery, j’apporte cet exemple aux experts de SO pour expliquer POURQUOI il s’est cassé, alors qu’aucune fonction dépréciée n’est utilisée. Merci pour toute votre aide anticipée. (jQuery 1.9.1 utilisé).

Actuellement, ce qui se produit est seulement “Le centre d’instruction (et la bordure” titlebox “) est affiché, alors que le bouton” cliquer pour afficher les instructions “est masqué (glissé vers le haut, je pense) … mais ce qui devrait se produire est en fait un clic bouton ‘img’, il glisse vers le bas de la classe ‘instrucContent’ … mais devrait être caché à la charge, et à la bascule de la ‘img’.

HTML

 The Instructional Center
  
 
  Instructions
 TEXT TEXT TEXT TEXT stackoverflow rocks TEXT TEXT TEXT

instructions.js

 $(document).ready(function() { $('div.instruc').toggle(function() { $('div.instrucContent').slideUp('normal'); $(this).next().slideDown('normal'); } ,function() { $('div.instrucContent').slideUp('normal'); $("div.instrucContent").hide(); }); $('div.ddinstruc').toggle(function() { $('div.instrucContent').slideUp('normal'); $(this).next().slideDown('normal'); } ,function() { $('div.instrucContent').slideUp('normal'); $("div.instrucContent").hide(); }); $("div.instrucContent").hide(); //closes all divs on page load });

La version de la fonction de toggle prenant les fonctions en tant que parameters a été supprimée des versions précédentes , car elle est facile à implémenter vous-même en utilisant click .

Par exemple :

 $(document).ready(function() { var count = 0; $('div.instruc').click(function() { if ((count++)%2) { $('div.instrucContent').slideUp('normal'); $(this).next().slideDown('normal'); } else { $('div.instrucContent').slideUp('normal'); $("div.instrucContent").hide(); } });

Vous pouvez également réintroduire une fonction de basculement avec le comportement de la fonction supprimée.

Voici un remplacement générique:

 $.fn.toggleFuncs = function() { var functions = Array.prototype.slice.call(arguments); var _this = this.click(function(){ var i = _this.data('func_count') || 0; functions[i%functions.length].call(_this); _this.data('func_count', i+1); }); }

Vous l’utilisez comme vous utiliseriez la bascule:

 $(document).ready(function() { $('div.instruc').toggleFuncs(function() { $('div.instrucContent').slideUp('normal'); $(this).next().slideDown('normal'); } ,function() { $('div.instrucContent').slideUp('normal'); $("div.instrucContent").hide(); }); $('div.ddinstruc').toggleFuncs(function() { $('div.instrucContent').slideUp('normal'); $(this).next().slideDown('normal'); } ,function() { $('div.instrucContent').slideUp('normal'); $("div.instrucContent").hide(); }); $("div.instrucContent").hide(); //closes all divs on page load });

La bascule que vous avez utilisée est obsolète dans jQuery 1.9. Consultez le Guide de mise à niveau de jQuery 1.9.

 $('div.instruc').toggle(function() { $('div.instrucContent').slideUp('normal'); $(this).next().slideDown('normal'); } ,function() { $('div.instrucContent').slideUp('normal'); $("div.instrucContent").hide(); });

 $('div.ddinstruc').toggle(function() { $('div.instrucContent').slideUp('normal'); $(this).next().slideDown('normal'); } ,function() { $('div.instrucContent').slideUp('normal'); $("div.instrucContent").hide(); });