Question

我在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"

我想知道如何制作具有此类数据属性的过滤器。基本上，我的每个图像都有一个名为Tags的对象，并且该标记的值为

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

这是Tags对象中的值。我对过滤的看法是将这些值添加为数据属性，然后进行过滤。但我需要建议如何从图像的这些值中过滤出来？

  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

以上是通过我添加数据属性的代码，您还可以考虑其他任何方式吗？使它工作？更明智？

Answer 1

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

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

});

这是jsFiddle中的一个例子。

https://jsfiddle.net/4shu6xy8/

使用图像jquery的对象创建过滤器

1 个答案: