javascript - 将模式中的图像选择应用到页面背景中

Question

我希望有人以前做过这件事并提供一些指导。

我在网站上使用 bootstrap，现在我有一个加载一组图片的工作模式，目前是 2 张。这工作正常，我将它们与 anchor 标签链接。

但是，我正在尝试找到选择图像的最佳方式，一旦用户点击它，就将其应用到容器的背景图像 css。

所以现在我只有一个背景测试图像，但基本上我想从模式中选择一个图像来创建一个 bgImg 变量，可以这么说，并将它实际应用到我的容器 div 的背景时间。所以这应该应用一些javascript，但我真的不知 Prop 体使用什么。或者就此而言，如何从选择中创建一个变量，然后将其应用于 CSS。

基本上，如果我从模态中选择图像 1，模态应该关闭并且图像的 URL 现在应该取代背景图像 url 的 CSS，如果这有意义的话

相关背景的 CSS:

.my-container>.middle {
  flex-grow: 1;
  padding:30px;
  background-image: /*this would be the bgImg for the href*/;
  background-size: cover;
}

我想应用到背景的模式和图像的 HTML

选择页面背景

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Choose an image:</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <a href="bgImg"><img style="width: 200px; height: 200px;" src="images/bg_orange.svg"></a>
        <a href="bgImg"><img style="width: 200px; height: 200px;" src="images/bg_green.svg"></a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

更新:

添加 JS

 <script type="text/javascript">
 const images = document.querySelectorAll('some-image-selector');
 images.forEach(img => img.addEventListener('click', setBackground));

 function setBackground(e) {
  const container = document.querySelector('.my-container > .middle')
  container.style.background = `url(${e.target.src}) center center no-repeat`
 };

 </script>

Answer 1

因此，为了使这项工作正常进行，您需要为每张图片添加一个点击事件监听器。

const images = document.querySelectorAll('some-image-selector')
images.forEach(img => img.addEventListener('click', setBackground))

类似的东西^^

然后在 setBackground 中，更新 css

function setBackground(e) {
  const container = document.querySelector('.my-container > .middle')
  container.style.background = `url(${e.target.src}) center center no-repeat`
}