Question

我有一系列图标，我可以选择和设置边框。我将所选图标的数量限制为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);
            }
        }
    }
};

Answer 1

您可以选择图片，使用not()^[docs]方法排除点击的图片，然后使用filter()^[docs]方法过滤其余"yes"。

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

示例： http://jsfiddle.net/kXCEr/1/

编辑：虽然我倾向于像这样实现它，所以你不需要使用.data()：

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

示例： http://jsfiddle.net/SJDxR/

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

Array开头的元素是第一个单击的元素。如果再次单击前一个“第一个”，则将其拼接，使阵列中的第二个项目成为新的“第一个”，因此它将获得黄色边框。

设置所有元素边框，其数据设置为“是”

1 个答案: