jquery ui.slider: ajouter un événement click pour afficher/masquer handle

Question

Je suis complètement nouveau pour javascript et jquery. Mes connaissances en programmation sont ... inexistantes, je viens de commencer il y a quelques jours avec des tâches simples comme le remplacement d'une classe css ou le basculement d'une div. Donc je veux m'excuser si je marche sur des orteils en posant des questions de débutant ici. Mais j'espère que quelqu'un pourra m'aider et résoudre mon problème.

J'ai besoin de mettre en place une sorte d'échelle visuelle analogique pour une enquête; ui.slider est parfait pour celui-là. Mais j'ai besoin que le handle soit caché par défaut. Lorsque l'utilisateur clique sur le curseur, la poignée doit apparaître à la bonne position. Cela devrait être assez simple - du moins je l'espère - en masquant simplement le handle avec css et en le modifiant par un événement click sur le curseur.

J'utilise la pièce de code suivante pour envelopper un div normal (un div est nécessaire dans ma compréhension pour appliquer les slider.js jquery) à mes éléments d'entrée (ils devraient être - au moins visuellement - remplacé par le curseur) et passez la valeur du curseur aux éléments d'entrée (nécessaire pour passer les valeurs à un formulaire). Cela fonctionne correctement. (Je fais ça au lieu de simplement mettre un div dans mon DOM par défaut parce que je ne peux pas influencer certains scripts php qui généreront des éléments de forme de l'enquête et ainsi de suite)

$(function() { 
$.each($('.slider'), 
function() { 
    obj = $(this); 
    obj.wrap('<div></div>'); 
    obj.parent().slider({ 
     change: function(event, ui) { 
      $('input', this).val(ui.value); 
     } 
    }); 
}); 
}); 

Hiding le curseur-poignée peut être fait par CSS comme décrit ci-dessus en changeant les propriétés de style de a.ui-slider-handle. mais lorsque j'ajoute un événement click normal au curseur (.ui-slider) qui change les propriétés css du handle, rien ne se passe. En ce qui concerne mes connaissances de base, cela devrait avoir quelque chose à voir avec l'événement click qui ne fonctionne pas sur les éléments DOM générés. Ai-je raison avec celui-là? Et si oui: comment puis-je résoudre ce problème? Quelqu'un pourrait-il me fournir un morceau de code pour ma fonction et l'expliquer afin que je puisse comprendre ce qui se passe exactement? J'ai lu un tutoriel sur les événements sur learningjquery.com mais je n'ai pas fait assez de progrès ces derniers jours depuis que j'ai commencé à travailler avec JS/jquery pour comprendre les étapes et les traduire dans mon exemple/problème. Et je manque de temps (j'en ai besoin pour un sondage que je dois faire dès que possible, c'est pourquoi j'espère que quelqu'un pourrait me donner un indice pour que je puisse résoudre ce petit problème en quelque sorte). Merci beaucoup, Marc.

Answer 1

Une raison pour laquelle vous ne pouvez pas simplement inclure le spectacle sur l'événement de changement plutôt qu'un clic? C'est un code un peu plus propre plutôt que d'inclure un tout nouvel événement.

$(function() { 
    $('.slider').wrap('<div></div>').parent().slider({ 
    change: function(event, ui) { 
     $('input', this).val(ui.value); 
     $('.ui-slider-handle').show(); 
    } 
    }); 
}); 

De plus, il y avait un peu de redondance dans le code - la plupart des fonctions jQuery renvoient l'objet lui-même, de sorte que vous pouvez les enchaîner. Et vous n'avez pas besoin de chaque fonction, car la plupart des fonctions de jQuery, lorsqu'elles sont appliquées à une collection, s'exécutent sur toutes les fonctions :)