Hinzufügen/Entfernen von kommaseparierten Eingabewerten mit jquery

Question

Ich kann add Werte zu einem Eingang und remove aber was ich erreichen möchte, sieht chaotisch aus.

Ich habe zwei Bilder, die beim Klicken, gibt mir ihre Benutzer-ID. Wenn Sie darauf klicken, wird ein versteckter Eingabewert von 1 hinzugefügt. Wenn das andere Bild geklickt wird, gleich:

<input id="selective-avatars" name="avatars[]" type=hidden value="1,2" /> 

Wenn gleiches Bild geklickt wird, wieder wird ihre ID (wie eine toggleClass Art der Sache) entfernt. Das ist der knifflige Teil, dem ich gegenüberstehe, wenn ich die beiden Verbindungen zusammenfüge.

Full HTML (Beispiel):

<img src="url" id="1" class="avatar" /> 
<img src="url" id="2" class="avatar" /> 
# Should this be in the loop also? It's currently not. 
<input id="selective-avatars" name="avatars[]" type=hidden /> 

JS:

$('.avatar').click(function(){ 
    let {id} = this; 
    //let array = $('#selective-avatars').val().split(','); 
    $('#selective-avatars').val(function(i, val){ 
    return [val + (!val ? '' : ',') + id]; 
    }); 
    //Removed about 8 lines as nothing works 

    //$(this).toggleClass('avatar-circle-display-loop-select') 
}); 

ich nicht versuchte, geht die Route reagieren, wie ich rein jquery im Nebenprojekt verwenden wollte.

Alles, was ich will, ist <input id="selective-avatars" name="avatars[]" type=hidden value="1,2, etc" /> gehen zum Controller.

Answer 1

Es sieht aus wie die id auf die .avatar Elemente sagt uns, welche Werte in den versteckten Eingang enthalten. Ich würde eine Flagge auf dem Element halten und den Wiederaufbau nur der Eingangswert jedes Mal: ​​

$('.avatar').click(function(){ 
    var $this = $(this); 
    $this.data("selected", !$this.data("selected")); // Will be `undefined` 
                // initially, which is falsy 
    var value = $('.avatar') 
     .filter(function() { 
      return $(this).data("selected"); 
     }) 
     .map(function() { 
      return this.id; 
     }) 
     .get() 
     .join(","); 
    $("#selected-avatars").val(value); 
}); 

ich Sie feststellen, ES2015 und oben genannten Funktionen verwendet haben, so in ES2015:

$('.avatar').click(function() { 
    const $this = $(this); 
    $this.data("selected", !$this.data("selected")); // Will be `undefined` 
                // initially, which is falsy 
    const value = Array.from($('.avatar')) 
     .filter(elm => $(elm).data("selected")) 
     .map(elm => elm.id) 
     .join(","); 
    $("#selected-avatars").val(value); 
});