jQuery-通过单击特定项目在输入标签中添加和删除项目

Question

I have a list of color items, like this : Black, Red, Green, Blue, Orange , separated from each other by <div> tags. I don't want to use a checkbox.

I wrote some jQuery code, but it is doesn't work well. I have some trouble with jQuery array methods, like the each method, push and splice methods.

When I click on the specific color name, for example Green , it should be added in the input tag, separated by comma from the next color name. And when I click a second time on the same color, it should be removed.

Also, if I click on each of the color names the first time, they should be added in the input tag, separated by comma.

Below is a my code in PHP, jQuery and HTML

I fetch color values from MySql by PHP:

<?php
$color = explode(',', $row['product_color']);
foreach($color as $color_value){
    echo'<div class="colorValue">';
    echo'<div class="colorItem">'.$color_value.'</div>';
    echo'</div>';
}
?>

This is jQuery code :

$(document).ready(function(){
    $('.colorValue').on('click',function(){
        var colorText = $(this).text();
        if($(this).attr('color-state') == 1){
            $(this).attr('color-state', 0)
            $(this).css('border', '2px solid #e0e5ea')
            $('#colorResult').val('');
        } else {
            $(this).attr('color-state', 1)
            $(this).css('border', '2px solid #09c')
            myFunc(colorText);
        }  
    });
    var myList=[];
    var ColorValue;

    function myFunc(ColorValue){
        myList.push(ColorValue);
        var output = "";
        for(var i in myList){
            output +=myList[i] + ',';
            //output=output.substring(0,output.length-1);
        }
        $('#colorResult').val(output);
    }
});

Here is the HTML input tag code, where colors should be added or removed after clicking:

<input type="text" name="colorResult" placeholder="Color" id="colorResult"/>

Answer 1

i created a new code for you doing the same thing but in a different way

$(document).ready(function(){
        $('.colorValue').on('click',function(){
            var colorText = $(this).text().trim();
            var selectedColors = $('#colorResult').val() !== "" ? $('#colorResult').val().split(',') : [];
            var elementIndex = selectedColors.indexOf(colorText);
            if(elementIndex == -1)
            {
                selectedColors.push(colorText);
                $('#colorResult').val(selectedColors.join(','));
            }
            else{
                selectedColors.splice(elementIndex, 1);
                $('#colorResult').val(selectedColors.join(','));
            }
        });
    });

i created a working JSFiddle you can check it

hope it helps