我一直在一个网站上显示图片以下载它,效果很好,但是我想制作一个放置标签的脚本,这样当人们使用搜索栏查找图片时,他们会更轻松。
我从互联网上找到了一个脚本,并试图将其放到我的网站上,它确实可以工作,但是问题是它显示的是我添加内容的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" />
答案 0 :(得分:0)
您在第二行中两次添加了crosshair.file。尝试只添加一次。
另外,您的标题为JavaScript,然后您的问题为Java脚本编制(应该是一个字,否则人们可能会认为您是在指JAVA),并且您的代码类似于jQuery?