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

Question

我有一个颜色项目列表，如下所示：黑色、红色、绿色、蓝色、橙色，由<div> 标签分隔。我不想使用复选框。

我写了一些 jQuery 代码，但效果不佳。我在使用 jQuery 数组方法时遇到了一些问题，例如 each 方法、push 和 splice 方法。

当我点击特定的颜色名称时，例如Green，它应该被添加到input标签中，与下一个颜色名称之间用逗号分隔。当我第二次点击相同的颜色时，它应该被删除。

另外，如果我第一次单击每个颜色名称，它们应该被添加到input 标签中，用逗号分隔。

下面是我的 PHP、jQuery 和 HTML 代码

我通过 PHP 从 MySql 中获取颜色值：

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

这是 jQuery 代码：

$(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);
    }
});

这里是 HTML input 标签代码，点击后应该添加或删除颜色：

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

Answer 1

我为您创建了一个新代码，但以不同的方式做同样的事情

$(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(','));
            }
        });
    });

我创建了一个有效的JSFiddle 你可以查看它

希望对你有帮助