Question

我一直在一个网站上显示图片以下载它，效果很好，但是我想制作一个放置标签的脚本，这样当人们使用搜索栏查找图片时，他们会更轻松。

我从互联网上找到了一个脚本，并试图将其放到我的网站上，它确实可以工作，但是问题是它显示的是我添加内容的x2

var crosshairs = [{
    "file": "1.png",
    "tags": "yellow, simple, edgy"
  },
  {
    "file": "2.png",
    "tags": "blue, grey, round"
  },
  {
    "file": "3.png",
    "tags": "small, black, yellow"
  },
  {
    "file": "4.png",
    "tags": "blue, big"
  },
  {
    "file": "5.png",
    "tags": "blue, small"
  },
  {
    "file": "6.png",
    "tags": "black, red, small"
  },
  {
    "file": "7.png",
    "tags": "red, black, big, round"
  },
  {
    "file": "8.png",
    "tags": "blue, red, white, round"
  },
  {
    "file": "9.png",
    "tags": "black, purple, small"
  },
  {
    "file": "10.png",
    "tags": "blue, purple, small"
  },
]

$.each(crosshairs, function(index, crosshair) {
  $('.content').append('<a href="content/' + crosshair.file + '" class="crs" download="siteM16.png" data-tags="' + crosshair.tags + '"><img src="content/' + crosshair.file + '"/></a>');
});

$("input").keyup(function() {
  $(".content a").show();
  search = $("input").val().split(" ");

  $(".content a").each(function() {
    tags = $(this).data("tags");
    element = $(this);

    $.each(search, function(index, value) {
      if (!tags.includes(value.toLowerCase())) {
        element.hide();
      }
    })
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content"></div>
<input type="text" />

Answer 1

您在第二行中两次添加了crosshair.file。尝试只添加一次。

另外，您的标题为JavaScript，然后您的问题为Java脚本编制（应该是一个字，否则人们可能会认为您是在指JAVA），并且您的代码类似于jQuery？

显示我添加的内容的x2的Javascript循环

1 个答案: