Question

我在从图像数组中动态创建内容时遇到问题。我想要发生的是，当关键字输入搜索栏时（尝试＆＃34;兜风＆＃34;或＆＃34;昵称＆＃34;），所有与关键字匹配的图像都会显示出来。目前，只显示一个图像，并且它不一定与关键字匹配。我认为我的javascript函数出错了 - 我觉得我不应该使用innerHTML来创建照片，特别是因为当关键字被删除时，它只会留下一个图像。

在jQuery / javascript中完成所有操作会更容易，而不是在jQuery中生成初始图像库并尝试在javascript中进行过滤吗？我输了。

http://scf.usc.edu/~uota/itp301/final/odc-photos.html

这是页面的工作版本，包含我正在使用的数组和其他代码。

提前致谢！

 $(document).ready(function(){
    for(var i = 0; i < src.length; i++){
    var content = "<div class='pics' id='imagesection" + i + "'>";
    content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
    content += "</div>";
    $("#gallery").append(content).hide().fadeIn(250);
}

});

var songSearch = function(keyword){
var foundFlag = false;
var content = "";

for (var i = 0; i < src.length; i++){
if (tags[i].toLowerCase().indexOf(keyword) != -1 || keyword == "") {
    content = "<div class='pics' id='imagesection" + i + "'>";
        content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
    content += "</div>";

        findFlag = true;
    }

}

if(findFlag){
document.getElementById("gallery").innerHTML = content;
}
else{
    content = "Your search did not return any results.";
}

 }

</script>

Answer 1

看起来问题出在songSearch函数的这一行：

content = "<div class='pics' id='imagesection" + i + "'>";

您正在重新定义变量内容而不是连接它。这样它始终只是最后一张图像。尝试将其更改为：

content += "<div class='pics' id='imagesection" + i + "'>";

songSearch函数中还有一个名为foundFlag的变量，后来被称为findFlag。但这不应该导致问题。

Javascript在用户搜索时从数组生成内容

1 个答案: