J'ai un menu déroulant et je veux déclencher quelque chose en cliquant dessus. Je ne sais pas si je devrais utiliser .change ou .click ou lequel est le meilleur ennemi pour quelque chose comme ça.

Mais en ce moment j'utilise .click.

enter image description here


HTML

<div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span class="summary-texts">Summary</span>
    <ul class="dropdown">
       <!-- Dynamic List will added here  -->
   </ul>
</div>

Ce que j'avais

$('#group-0').click(function() {
  updateInfo("0");
  chart.draw( data[0] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 0 ');
});
$('#group-1').click(function() {
  updateInfo("1");
  chart.draw( data[1] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 1 ');
});
$('#group-2').click(function() {
  updateInfo("2");
  chart.draw( data[2] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 2 ');
});
$('#group-3').click(function() {
  updateInfo("3");
  chart.draw( data[3] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 3 ');
});
$('#group-4').click(function() {
  updateInfo("4");
  chart.draw( data[4] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group 4 ');
});

Ce n'est pas aussi bon que vous pouvez le voir, beaucoup de valeurs de code dur. donc je refactorise mon code.


Ce que j'ai maintenant

for (var assignment in objects.assignments ) {

$('#group-'+assignment).click(function() {
  updateInfo(assignment);
  chart.draw( data[assignment] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group '+assignment);
});

}

Résultat

Lorsque je sélectionne quelque chose dans le menu déroulant, il continue d'afficher Group 4. Je ne sais pas pourquoi il fait ça.

Suis-je l'optimiser de la bonne façon?

Comment gérer les actions de modification de mon menu déroulant?

Toutes les aides / conseils / suggestions seront d'une grande aide pour moi.

1
cyber8200 13 juil. 2015 à 21:40

6 réponses

Meilleure réponse

Voyons ce que fait actuellement votre code:

Itérer sur objects.assignments, définissant assignment comme un variable dans le contexte d'exécution actuel. À chaque itération, prendre la prochaine propriété énumérable de object.assignments et lui donner à assignments.

Si, par exemple, une fois la boucle for terminée, vous avez ajouté console.log(assignment), vous constaterez qu'il écrit la dernière valeur donnée à assignment dans la boucle for : 4. Pourquoi? Parce que la variable assignment n'est pas limitée à la boucle for. Les boucles For ne créent pas leur propre étendue .

Par conséquent, lorsqu'un des gestionnaires de clic est invoqué, il accède à la dernière valeur donnée à assignment, qui est 4.

Nous pouvons éviter ce problème en utilisant la fonction each() de jQuery, car les fonctions créent leur propre étendue .

$.each(objects.assignments, function(index, value) {
    $('#group-' + index).click(function() {
        updateInfo(index);
        chart.draw(data[index] , options);
        $("#dd.wrapper-dropdown-1 .summary-texts").text('Group ' + index);
    });
});
1
sdgluck 14 juil. 2015 à 14:17

Au lieu d'ajouter un nouvel événement de clic pour chaque élément (que se passe-t-il lorsqu'un élément ne correspond pas à votre modèle "groupe-x"?), Ajoutez un événement de clic sur l'élément "ul", ou si vous le devez, sur chaque "li "et obtenez le texte en utilisant la propriété" innerText "ou" textProperty "de l'élément DOM.

Voici quelques exemples:

obtenir le texte dans un élément de liste et le modifier avec javascript

Comment obtenir la valeur / le texte d'un élément de liste Javascript

J'essaierais personnellement de définir l'événement de clic aussi haut que possible pour garder le code propre sur la page et le temps de chargement plus bas.

1
Community 23 mai 2017 à 11:51

Permettez-moi de modifier votre code. Le html peut ressembler à ce qui suit.

<ul class="dropdown">
       <li class="groups" id="group-1">
       <li class="groups" id="group-2">
   </ul>

Et débarrassez-vous de la boucle d'affectation

$('.groups').click(function() {
var element_id = $(this).attr("id").split("-")[1];
  updateInfo(element_id);
  chart.draw( data[element_id] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group '+element_id);
});

Prendre plaisir!!

0
Niroj 13 juil. 2015 à 19:27

Je me débarrasserais de la boucle for et utiliserais simplement jquery. Le ^= du sélecteur écoute les identifiants commençant par group-. Pour obtenir le numéro de groupe réel, vous devez supprimer group- sinon l'affectation sera quelque chose comme group-2 au lieu de simplement 2.

$('#dropdown li').on('click',function(){
  var assignment=$(this).attr('id').replace('group-','');
  updateInfo(assignment);
  chart.draw( data[assignment] , options);
  $("#dd.wrapper-dropdown-1 .summary-texts").text('Group '+assignment);
});
2
depperm 13 juil. 2015 à 19:09

Vous avez deux options:

1 °: utilisez une sélection:

<select>
    <option value='v'>text</option>
    ...
</select>

Ensuite, vous ajouterez un écouteur de changement sur la sélection.

2 °: faites-le comme vous le faites (et cela peut être une bonne option pour les questions de style), mais ajustez-le un peu. Tout d'abord, ajoutez correctement vos options, comme ceci:

[ {
  "text": "Group 0",
  "value": 1
}, {
  "text": "Group 1",
  "value": 2
}, {
  "text": "Group 2",
  "value": 3
}, {
  "text": "Group 3",
  "value": 4
} ].forEach( function( el ) {
  $( "#dropdown" ).append( "<li data-info=\" + el.value + "\">" + el.text + "</li>" )
} );

Ensuite, vous devez utiliser la délégation d'événements. Ajoutez l'événement click sur ul. C'est vraiment meilleur en termes de performances et cela vous permettra d'ajouter des options après la pièce jointe à l'événement.

$("#dropdown").on( "click", "li", function( e ) {
  console.log( $( e.target ).data( "info" ) )
  updateInfo( $( e.target ).data( "info" ) );
  chart.draw( data[ $( e.target ).data( "info" ) ] , options);
} );

Je vous ai créé un bac js pour jouer avec: https: // jsbin. com / posuzeyija / edit? html, js, console, output

1
fabien 13 juil. 2015 à 19:03

Un élément 'select' ne serait-il pas mieux que d'avoir un 'ul' et d'utiliser CSS pour le faire fonctionner comme une liste déroulante?

Quoi qu'il en soit, «.change» et «.click» sont des choses différentes. Le premier agira lorsqu'un élément a été modifié, donc si vous cliquez sur le même élément que vous aviez sélectionné auparavant, rien ne s'exécutera. Ce dernier exécutera le code chaque fois que vous cliquez sur n'importe quel des éléments, indépendamment de ce qui a été précédemment sélectionné. Vous devez déterminer lequel vous voulez ou dont vous avez besoin.

Voici une solution rapide pour le créer avec une sélection: http://jsfiddle.net/sf3buwbq/

$('#select').change(function() {
   $(this).find("option:selected");
});

Je ne sais pas si vous comprenez que cela peut être réalisé et que vous pouvez stocker toutes les informations que vous souhaitez dans le

<option> </option>
0
Ted 13 juil. 2015 à 19:04