Javascript 设置数据设置为“的所有元素边框”；是”；

我有这一系列的图标，我可以选择和设置它们的边框。我将选择的图标数量限制为5个。第一个选中的将成为黄色边框。接下来的4个是黑色边框。当我再次单击它们时，它们需要取消设置。我使用

.data

方法：

在document.ready上，我执行以下操作：

$('img.selectable').click(function(){
    image_click(this);
});

对于CSS：

.selectable {
    border: 3px solid #ebe6b3;
    float:left;
    margin:1px;
}

对于HTML：

<img class="selectable" src="img/first_icon.png">

我有这个功能：

function image_click(e)
{
    if($(e).data("clicked")=="yes")
    {
        images_selected--;
        $(e).data("clicked","no").css('border','3px solid ' + NEUTRAL_COLOR);
        if(images_selected==1)
        {
            // PROBLEM HERE
            $(e).data("clicked==yes").css('border','3px solid ' + YELLOW_COLOR);
            // PROBLEM HERE
            // How do I set the remaining img elements with data 
            // "clicked"=="yes" to be YELLOW?
        }
    }
    else
    {
        if (images_selected<5)
        {
            images_selected++;
            if(images_selected==1)
            {
                $(e).data("clicked","yes").css('border','3px solid ' YELLOW_COLOR);
            }
            else
            {
                $(e).data("clicked","yes").css('border','3px solid ' + BLACK_COLOR);
            }
        }
    }
};

功能图像\u单击（e）
{
如果（$（e）.数据（“单击”）=“是”）
{
所选图像--；
$（e）.数据（“点击”，“否”）.css（'边框'，'3px实心'+中性色）；
如果（所选图像==1）
{
//这里有问题
$（e）.data（“单击==yes”）.css（'border'，'3px solid'+黄色）；
//这里有问题
//如何使用数据设置剩余的img元素
//“单击”==“是”将变为黄色？
}
}
其他的
{
如果选择了（images_）您可以选择图像，使用该方法排除单击的图像，然后使用该方法过滤剩余的具有
“yes”
的图像

示例：


编辑：尽管我倾向于这样实现它，所以您不需要使用
.data（）
：

var NEUTRAL_COLOR=“#ebe6b3”；
var YELLOW_COLOR=“黄色”；
var BLACK_COLOR=“黑色”；
所选var=[]；
var imgs=$（'img.selective'）。单击（图像单击）；
var updateColors=函数（）{
$（选中[0]）.css（'border'，'3px solid'+黄色）；
$（选定的.slice（1））.css（'border'，'3px solid'+黑色）；
imgs.not（selected）.css（'border'，'3px solid'+中性色）；
}
功能图像\单击（e）{
var idx=$.inArray（此，选中）；
如果（idx！=-1）{
选择。拼接（idx，1）；
}否则如果（已选择。长度<5）{
选中。推送（此）；
}否则{
返回；
}
更新颜色（）；
}

示例：

这只是维护一个选定项目的数组，在单击一个项目时修改数组（如果少于5个），并更新颜色

数组开头的元素是单击的第一个元素。如果再次单击上一个“第一个”元素，它将被拼接，使数组中的第二个项目成为新的“第一个”，因此它会得到黄色边框。
您可以选择图像，使用该方法排除单击的图像，然后使用该方法过滤具有“是”的剩余图像。

示例：

---

编辑：尽管我倾向于这样实现它，所以您不需要使用

.data（）

：

var NEUTRAL_COLOR=“#ebe6b3”；
var YELLOW_COLOR=“黄色”；
var BLACK_COLOR=“黑色”；
所选var=[]；
var imgs=$（'img.selective'）。单击（图像单击）；
var updateColors=函数（）{
$（选中[0]）.css（'border'，'3px solid'+黄色）；
$（选定的.slice（1））.css（'border'，'3px solid'+黑色）；
imgs.not（selected）.css（'border'，'3px solid'+中性色）；
}
功能图像\单击（e）{
var idx=$.inArray（此，选中）；
如果（idx！=-1）{
选择。拼接（idx，1）；
}否则如果（已选择。长度<5）{
选中。推送（此）；
}否则{
返回；
}
更新颜色（）；
}

示例：

这只是维护一个选定项目的数组，在单击一个项目时修改数组（如果少于5个），并更新颜色

数组开头的元素是单击的第一个元素。如果再次单击上一个“第一个”元素，它将被拼接，使数组中的第二个项目成为新的“第一个”，因此它将获得黄色边框

$('img.selectable').not( e ).filter(function() {
    return $( this ).data("clicked")=="yes";
}).css('border','3px solid ' + YELLOW_COLOR);

var NEUTRAL_COLOR = "#ebe6b3";
var YELLOW_COLOR = "yellow";
var BLACK_COLOR = "black";

var selected = [];

var imgs = $('img.selectable').click(image_click);

var updateColors = function() {
    $(selected[0]).css('border', '3px solid ' + YELLOW_COLOR);
    $(selected.slice(1)).css('border', '3px solid ' + BLACK_COLOR);
    imgs.not(selected).css('border', '3px solid ' + NEUTRAL_COLOR);
}

function image_click(e) {
    var idx = $.inArray(this, selected);
    if (idx !== -1) {
        selected.splice(idx, 1);
    } else if (selected.length < 5) {
        selected.push(this);
    } else {
        return;
    }
    updateColors();
}