Javascript 使用对象为图像jquery制作过滤器

我在一个div中有许多图像标签，其类别为

google image layout

，所有图像都有数据属性，例如

data-anger="0" data-disgust="0" data-facedetected="0" data-fear="0" data-happiness="0" data-largefacedetected="0" data-neutral="0" data-sadness="0" data-surprise="0"

我想要一个建议，我如何才能使这样的数据属性过滤器。基本上，我有一个对象，每个图像都称为

标签

，标签的值为

FaceDetected : 0
Anger : 0
Disgust : 0
LargeFaceDetected : 1
Neutral : 0
Sadness : 1

这是标记对象中的值。我认为过滤是将这些值添加到数据属性中，然后进行过滤。但是我需要建议，我怎样才能从这些图像值中制作一个过滤器

  tags = ""
  $.each Images, (i, Image) ->
    tangRef = storageRef.child(capitalizeFirstLetter("#{Image.Path}"));
    tangRef.getDownloadURL().then((url) ->
      $.each Image.Tags, (i, value) ->

        tags += "data-#{i}='#{value}' "
        console.log "#{i} : #{value}"
      console.log tags
      image_tag = "<img #{tags} data-width='480' data-height='256' src='#{url}' />"
      $(".google-image-layout").append(image_tag)
      GoogleImageLayout.init()
      tags = ""
    ).catch (error) ->
      console.log error
      return

tags=“”
$。每个图像（i，图像）->
tangRef=storageRef.child（大写第一个字母（#{Image.Path}））；
tangRef.getDownloadURL（）。然后（（url）->
$.each Image.Tags，（i，value）->
标记+=“数据-#{i}='#{value}'
console.log“#{i}:#{value}”
console.log标记
image_tag=“”
$（“.google图像布局”）.append（图像标签）
GoogleImageLayout.init（）
tags=“”
).catch（错误）->
console.log错误
返回

---

以上是我添加数据属性的代码，您还有其他方法可以考虑吗？让它工作？更明智

您可以在搜索词和与其相关的数据属性之间创建映射。即

function SearchMap(term, attr){
    this.term = term;
    this.attr = attr;
}

var arry = [];
arry.push(new SearchMap('Large Face', 'largefacedetected'));
arry.push(new SearchMap('Fear', 'fear'));
arry.push(new SearchMap('Anger', 'anger'));
arry.push(new SearchMap('Happy', 'happiness'));
arry.push(new SearchMap('Disgust', 'disgust'));

然后在搜索时，只需找到与搜索词相关的数据属性，如下所示：

$("#search-btn").on("click", function() {
    $(".pic").hide();
  $("#console").empty();

    var val = $("#search-input").val();
    var result = $.grep(arry, function(e){ return e.term == val; });
    $("#console").append(JSON.stringify(result));

  //TODO: Check result length to see if any exists/Multiple 
  if(result.length == 1) {
    var attr = result[0].attr;
    $("div[data-"+attr+"='1']").show();
  }

});

下面是JSFIDLE中的一个示例

---

但是img标记没有大面数据属性。请为您的代码创建JSFIDLE以了解您实际尝试了什么？您可以尝试以下操作：

$（'[data largefacedetected=“1”]'）。show（）$（'[data largefacedetected=“0”]'）。隐藏（）好的，让我编辑我的问题question@ijunaidfarooq从基本意义上说，是的，这只是一个例子。没有验证，因为它超出了问题的范围。