javascript - 如何用纯 JavaScript 编写以下 JQuery 函数？

Question

我正在尝试构建一个带有透明图像的配置器。现在图像配置器通过一个简单的 JQuery 函数工作:我给每个输入元素一个数据属性，我称之为数据图像。该函数捕获所选选项的数据图像并将其加载到元素的内联样式中。

<div id="configurator-image"></div>

<select id="configurator">
    <option data-image="url(http://test.com/img/option1.png)">option1</option>
    <option data-image="url(http://test.com/img/option2.png)">option2</option>
</select>

$("#configurator").change(function(){
    $("#configurator-image").css("background-image", ($('#configurator option:selected').data("image")));
}).change();

代码笔:http://codepen.io/anon/pen/jPaGVM

我正在尝试找出最佳实践。等待使用的背景图像和单独的元素可能不会。简单地为选定的选项创建一个 img 会更聪明吗？这样的函数长什么样子？

我想减少网站负载，并且尽可能不使用 JQuery。

Answer 1

function config() {
  document.querySelector("#configurator-image").style.backgroundImage = document.querySelector('#configurator option:checked').dataset.image;
}
config();

#configurator-image {
  height: 100px;
  background-size: contain;
}

<div id="configurator-image"></div>

<select id="configurator" onchange="config()">
  <option data-image="url(http://cardstock-test.de/products/feinleinen/agenda/chamois-inside.png)">option1</option>
  <option data-image="url(http://cardstock-test.de/products/feinleinen/agenda/schwarz-inside.png)">option2</option>
</select>

这对你有用吗？您可以使用 addEventListener .