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

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的开始处的元素是第一次单击。如果再次点击前一个“第一个”，则将它拼接起来，使阵列中的第二个项目成为新的“第一个”，因此它会得到黄色边框。