javascript - 使用本地存储更改 CSS 背景图片

Question

我在处理一段 JavaScript 代码时遇到了一些麻烦。

代码如下:`

$(switchBackground);
var oFReader = new FileReader(),
    rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function(oFREvent) {
    localStorage.setItem('b', oFREvent.target.result);
    switchBackground();
};

function switchBackground() {
  var backgroundImage = localStorage.getItem('b');
  if (backgroundImage) {
    $('#profile').css('background-image', 'url(' + backgroundImage + ')');    
  } 
}

function loadImageFile(testEl) {
  if (! testEl.files.length) { return; }
  var oFile = testEl.files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}

`

我的问题如下，因为我对 JavaScript 几乎一无所知，所以我很难弄清楚如何克隆该代码。 我有 2 <div>的 - 一个 id="profile"另一个是id="start-menu" , 我希望我的网页的用户能够更改这两个 <div> 的背景图像的，但直到现在我只能更改 <div>与 id="profile" .他们改变这些背景的方式是通过一个输入按钮，更确切地说是这个按钮:

<input id="test" type="file" onchange="loadImageFile(this)" />

我已经尝试在一些函数名中添加一些其他字符，然后只需更改 id="test2"或 onchange="loadImageFile2(this) ，但直到现在我还没有成功。 顺便说一下，我不希望用同一个按钮更改背景，有 2 个不同的输入按钮，两者的结构与上面相同(除了函数调用它们几乎相同)。

我究竟需要在上面的 JS 代码中更改什么才能使其与 div 一起工作？的？写答案时请尽量清楚，因为我的母语不是英语，有时我对某些短语的理解有点困难。

Answer 1

这一行很重要:

$('#profile').css('background-image', 'url(' + backgroundImage + ')');

看到#profile部分了吗？那是一个 selector .这是告诉浏览器更改 ID=profile 的 div 的背景。如果您将其更改为:

$('#start-menu').css('background-image', 'url(' + backgroundImage + ')');

然后它会更新另一个 div。

如果您希望它用相同的图像更新两个 div，只需执行以下操作:

function switchBackground() {
    var backgroundImage = localStorage.getItem('b');
    if (backgroundImage) {
        $('#profile').css('background-image', 'url(' + backgroundImage +')');
        $('#start-menu').css('background-image', 'url(' + backgroundImage +')');   
    } 
}

如果您希望它们是单独的图像，那么您必须修改 switchBackground 函数以接受要切换的 div 的参数。