Konvertieren Sie eine durch Komma getrennte Zeichenfolge in ein Array und zurück und löschen Array-Elemente mit onClick-Ereignis

Question

Ich habe ein HTML-Dokument. Es gibt 2 Felder:

• Erste ist ein verstecktes Eingabefeld (mit einem vorgewählten Wert)
• Die andere sind, ein leeres Texteingabefeld. Es zeigt den aktuellen Wert des ersten mit jQuery an.

Zwischen diesen 2 Feldern habe ich 9 Tasten mit verschiedenen Texten in ihnen.

Mit jQuery, wenn ich auf eine Schaltfläche klicke fügt er seinen Text in das sichtbare Feld (getrennt durch ein Koma) und fügt sich selbst eine enabled Klasse hinzu. Das funktioniert.

Wenn ich auf die gleiche Schaltfläche klicke, wird die Klasse entfernt (das funktioniert).

Was nicht funktioniert:
ich zur gleichen Zeit möchte er seinen Namen aus dem Feld entfernt (mit Koma) I Mit jQuery/JavaScript Ich habe versucht, mit split() jeden Namen in dem Feld zu konvertieren (Koma getrennt) zu einem Array, um bei Bedarf einfach eines von ihnen mit splice() zu löschen.

Was ich haven noch nicht getan:
Ich muß Koma getrennte Zeichenfolge konvertieren-it zurück, den vorhandenen Zeichenfolge-Wert in dem Feld zu ersetzen (I haven dies noch nicht getan). Ich bin nicht weit.

Mein Code auf JS Fiddle

Wie kann ich das erreichen?

Mein Code in hier:

jQuery(document).ready(function($){ 
 
    if ($('.subscribe-text').val() == ''){ 
 
    \t $('.subscribe-text').val($('.subscribe-text-get').val()+',') 
 
    } 
 

 

 
    $('.subscribe-button').click(function(){ 
 
\t  if(!$(this).hasClass('enable')) 
 
     { 
 
     \t $('.subscribe-text').val($('.subscribe-text').val()+$(this).html()+','); 
 
     \t $(this).addClass('enable'); 
 
     } 
 
     else if($(this).hasClass('enable')) 
 
     // 
 
     // I would like to remove the name in the field 
 
     // when a button is clicked and has 'enable' class 
 
     // 
 
     { 
 
\t   var myArray = new Array(); 
 
\t   var myString = $('.subscribe-text').val(); 
 
\t   myArray = myString.split(","); 
 
\t   var myItem = $(this).html()+' '; 
 
\t   var indexPos = myArray.indexOf(myItem); 
 
\t   if(indexPos != -1) 
 
      { 
 
\t \t  myArray = myArray.splice(indexPos, 1); 
 
\t \t \t } 
 
\t   $('.subscribe-text').val(myArray); 
 
     \t $(this).removeClass('enable'); 
 
     } 
 
    }); 
 
});

.subscribe-button { 
 
    background-color:#ddd 
 
} 
 
#buttons_x3 { 
 
    width:500px; 
 
} 
 
.subscribe-text { 
 
    width:100%; 
 
    font-size:9px; 
 
} 
 
.subscribe-button { 
 
    display: inline-block; 
 
    text-align:center; 
 
    padding:3px; 
 
    margin-bottom: 10px; 
 
    color: black; 
 
    height:20px; 
 
    width:100px; 
 
    margin:10px 20px 10px; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="my_custom_checkout_field"> 
 
    <input type="hidden" class="subscribe-text-get" name="my_field_name" value="woo-multi-1"> 
 
</div> 
 
<br> 
 
<div id="buttons_x3"> 
 
<a class="subscribe-button">woo-single-1</a> 
 
<a class="subscribe-button">woo-single-2</a> 
 
<a class="subscribe-button">woo-single-3</a> 
 
<a class="subscribe-button">woo-multi-1</a> 
 
<a class="subscribe-button">woo-multi-2</a> 
 
<a class="subscribe-button">woo-top-1</a> 
 
<a class="subscribe-button">woo-top-2</a> 
 
<a class="subscribe-button">woo-top-3</a> 
 
<a class="subscribe-button">woo-special</a> 
 
</div> 
 
<br> 
 
<div id="my_custom_checkout_field"> 
 
    <input type="text" class="subscribe-text" name="my_field_name" value>

Answer 1

hier ein paar Dinge Vorsicht:

1) Jedes Mal, wenn Sie auf eine Schaltfläche klicken Sie mit einem neuen Array erstellen lange Schnur innen.

2) Splice gibt den Wert des entfernten Elements zurück, sodass Sie bei jedem Klicken auf eine Schaltfläche die Array-Zeichenfolge als das Objekt festlegen, das Sie gerade entfernt haben.

Initialisieren Sie das Array stattdessen außerhalb Ihrer Klickfunktion und fügen Sie jedes neue Element am Ende hinzu. Legen Sie den Wert der Eingabe mit der toString() -Methode fest. Dadurch wird das Array der verbleibenden Werte und ihre Reihenfolge beibehalten.

jQuery(document).ready(function($){ 
 

 
    var myArray = []; 
 
    
 
    if ($('.subscribe-text').val() == ''){ 
 
    \t myArray[0] = $('.subscribe-text-get').val(); 
 
    \t $('.subscribe-text').val(myArray.toString()); 
 
    } 
 
    
 
    var $item, length; 
 
    
 
    $('.subscribe-button').click(function(){ 
 
    
 
    \t length = myArray.length; 
 
    
 
     if(!$(this).hasClass('enable')) { 
 
    
 
      $item = $(this).html(); 
 
      myArray[length] = $item; 
 
    
 
      $('.subscribe-text').val(myArray.toString()); 
 
      $(this).addClass('enable'); 
 
     } 
 
     else if($(this).hasClass('enable')) { 
 
      
 
      var myItem = $(this).html(); 
 
      var indexPos = myArray.indexOf(myItem); 
 
      if(indexPos != -1) { 
 
    \t   \t myArray.splice(indexPos, 1); 
 
      } 
 
    
 
      $('.subscribe-text').val(myArray.toString()); 
 
      $(this).removeClass('enable'); 
 
     } 
 
    }); 
 
});

.subscribe-button { 
 
    background-color:#ddd 
 
} 
 
#buttons_x3 { 
 
    width:500px; 
 
} 
 
.subscribe-text { 
 
    width:100%; 
 
    font-size:9px; 
 
} 
 
.subscribe-button { 
 
    display: inline-block; 
 
    text-align:center; 
 
    padding:3px; 
 
    margin-bottom: 10px; 
 
    color: black; 
 
    height:20px; 
 
    width:100px; 
 
    margin:10px 20px 10px; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="my_custom_checkout_field"> 
 
    <input type="hidden" class="subscribe-text-get" name="my_field_name" value="woo-multi-1"> 
 
</div> 
 
<br> 
 
<div id="buttons_x3"> 
 
<a class="subscribe-button">woo-single-1</a> 
 
<a class="subscribe-button">woo-single-2</a> 
 
<a class="subscribe-button">woo-single-3</a> 
 
<a class="subscribe-button enable">woo-multi-1</a> 
 
<a class="subscribe-button">woo-multi-2</a> 
 
<a class="subscribe-button">woo-top-1</a> 
 
<a class="subscribe-button">woo-top-2</a> 
 
<a class="subscribe-button">woo-top-3</a> 
 
<a class="subscribe-button">woo-special</a> 
 
</div> 
 
<br> 
 
<div id="my_custom_checkout_field"> 
 
    <input type="text" class="subscribe-text" name="my_field_name" value>

Hier ist mein Code auf einem jsFiddle