javascript - <div> 部分的可变背景

Question

我想写一个部分是这样的 html:

<div id="...." style="background-image:url(---.jpg);">
    <p>...</p>
</div>

我正在考虑在主机目录中创建一个图像文件夹，并为用户提供选择可以作为上述背景的适当图像的选项。有人可以建议我如何实现吗？

Answer 1

你想要的，没有你想的那么简单

如果您不想关心文件夹中有哪些图像可用，您将需要一个服务器进程，它可以将该文件夹的内容作为列表返回，例如给定

<div id="someDiv">Some content to make sure the div is not collapsed</div>

你需要生成这样的东西(不推荐内联，使用 jQuery 或类似的会简化你的代码)

<a href="someimage.jpg" 
onclick="document.getElementById('someDiv').style.backgroundImage=this.href;
return false"><img src="someimage.jpg" height="100" /></a>

---

要使用自动完成你可以这样做

$(document).ready(function() {
  $("input#autocomplete").keypress(function(e) {
    if (e.which == 13 ) {
      $('#someDiv').("background-image", "url("+$(this).val()+")");
      event.preventDefault();
    }
  });
  $("input#autocomplete").autocomplete({
      source: ["apple.jpg", "banana.jpg","orange"]
  });
});