Question

我有一个颜色项列表，例如：黑色，红色，绿色，蓝色，橙色，彼此之间用<div>标签隔开。我不想使用复选框。

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

当我单击特定的颜色名称（例如绿色）时，应将其添加到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，您可以检查它

希望有帮助

jQuery-通过单击特定项目

1 个答案: