Aide avec div sélection et désélection dans jquery

Question

J'essaie de désélectionner l'autre div je clique sur avant. J'ai stocké l'ancien ID div dans une entrée cachée comme vous pouvez le voir ci-dessous j'ai ajouté une alerte pour afficher la dernière div sélectionnée et ça fonctionne bien mais dès que j'essaie de changer la couleur du texte div dans css tout le script cesse de fonctionner .

function edit_addon(div_id) { 
$("#"+div_id).attr('contentEditable', true); 
$("#"+div_id).html() 
$("#"+div_id).css('color','#F00'); 
$("#"+div_id).css('cursor','Text'); 


var old_div = $("input#selected_div").val(); 
alert(old_div); 
$("#"+old_div).css('color','#000'); 

$("input#selected_div").val(div_id); 

} 

Answer 1

Êtes-vous sûr que le alert fonctionne très bien? Il ne devrait pas fonctionner sur le premier passage, car il n'y avait pas de valeur pour selected_div jusqu'au premier appel à edit_addon.

Modifier le code:

function edit_addon (div_id) { 
    $("#"+div_id).attr ('contentEditable', true) //-- Use no semicolon here 
       .css ('color','#F00') 
       .css ('cursor','Text') 
       ; 

    var old_div = $("input#selected_div").val(); 
    alert(old_div); 
    if (old_div) 
     $("#"+old_div).css('color','#000'); 

    $("#selected_div").val(div_id); 
} 

. Si vous le faites, notez qu'en changeant la fonction en gestionnaire d'événements (comme indiqué sur jsfiddle), vous pouvez simplifier le code HTML et lier la fonction de manière progressive-enhancement.

Answer 2

Cela semble fonctionner correctement.

function edit_addon(div_id) { 
       $("#"+div_id).attr('contentEditable', true) 
       .css('color','#F00'); 
       .css('cursor','Text'); 


       var old_div = $("input#selected_div").val(); 
       alert(old_div); 
       $("#"+div_id).css('color','#000'); 

       $("input#selected_div").val(div_id); 

      } 

<div id="hello" onclick="edit_addon('hello')">HelloWorld!</div> 
<div id="bye" onclick="edit_addon('bye')">Bye!!</div> 
<form><input type="hidden" id="selected_div" /></form> 

Je l'ai utilisé et il ne semble pas y avoir de problème.

Answer 3

J'ai quelques pointeurs pour faciliter l'écriture et améliorer votre code existant. Tout d'abord, les lignes 1 à 4 continuent à sélectionner l'élément souhaité, ce qui signifie plus de traversées de DOM, ce qui est plus lent. Toutes les méthodes jQuery retour l'instance de l'élément (s), de sorte que vous pouvez « chaîne » méthode appelle comme ceci:

$("#"+div_id).attr('contentEditable', true) 
    .css('color','#F00') 
    .css('cursor','Text'); 

Note: La ligne casse ici sont insignifiants.

En second lieu, les sélecteurs de la forme #myId fonctionnent généralement mieux que les sélecteurs de forme tagnam#myId, la raison étant la première directement à tracera document.getElementById alors que le second utilisera document.getElementsByTagName et ensuite en boucle sur eux pour trouver celui avec l'id.

Donc, revenons à votre question initiale. Ma suggestion consiste simplement à ajouter une classe CSS à votre élément sélectionné, plutôt que de définir des styles en ligne avec l'appel à .css(). Ensuite, il n'est pas nécessaire de stocker votre élément précédent dans un champ caché comme vous l'avez suggéré. Au lieu de cela, vous pouvez simplement sélectionner les balises div qui ont votre classe sélectionnée. La clé ici est que votre élément précédent, le cas échéant, aura toujours la classe CSS que vous ajoutez.

Voici un exemple de ce que je veux en venir:

function edit_addon(div_id) 
{ 
    //step 1 - find your old element and clear the CSS 
    $('div.selected').removeClass('selected'); 
    //step 2 - now, modify the div_id element 
    $("#"+div_id).attr('contentEditable', true) 
     .addClass('selected'); 
}