Question

我正在尝试使用透明图像构建配置程序。现在，图像配置器适用于一个简单的JQuery函数：我给每个输入元素一个数据属性，我称之为data-Image。该函数捕获所选选项的数据 - 图像，并将其加载到元素的内联样式中。

<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();

Codepen：http://codepen.io/anon/pen/jPaGVM

我试图找出最佳做法。等待使用的背景图像和单独的元素可能不会。简单地为选定的选项创建img会更聪明吗？这样的功能怎么样？

我希望减少网站负载，并且可能在可能的情况下不使用JQuery。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

如何在纯JavaScript中编写以下JQuery函数？

1 个答案: