ajouter/supprimer un identifiant d'image dans/de la zone de texte lorsque l'image est cliquée

Question

Je travaille sur un module de nouvelles simple. Il existe un formulaire dans lequel l'utilisateur ajoute plusieurs ID d'image à une zone de texte, puis les soumet. Pour améliorer la convivialité, j'ai répertorié toutes les images qu'ils peuvent ajouter (numéros d'identification affichés à côté) sur un côté. Cependant, cela reste un peu confus. Je souhaite que les ID d'image soient ajoutées/supprimées dans la zone de texte lorsque l'utilisateur clique sur les images. Épargnez-moi les codes, les méthodes, les idées, les exemples ... Je prendrai n'importe quoi.

Answer 1

1. Créer liste des entrées cachées: <input type="hidden" name="photo[ID_HERE]" value="0" />.
2. Créer une liste d'images: ...<li><img src="..." id="photo-123" /> Photo #123</li>...

3. Ajouter écouteur pour l'événement clic pour les images qui vont changer la valeur d'entrée associée à l'image:

   $("#images img").click(function() { 
       var id = $(this).attr("id").replace(/\D/g, ""); 
       $("input[name='photo[" + id + "]']").val(Math.abs($("input[name='photo[" + id + "]']").val() - 1)); 
   }); 
   

Answer 2

Quelque chose comme ça (non testé)?

var $input = $('#textbox'); // <-- your input field 

$('img').click(function() { 
    var value = $input.val(); 
    var id = $(this).attr('id'); 
    if (value.match(id)) { 
     value = value.replace(id, ''); 
    } 
    else { 
     value += ' ' + id; 
    } 
    $input.val(value); 
});