Question

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

我在网站上使用引导程序，现在我有一个工作模式，可以加载一组图片，当前为2张。这很好用，并且我将它们与锚标签链接了。

但是，我正在尝试找到进行图像选择的最佳方法，一旦用户单击它，请将其应用于容器的背景图像css。

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

基本上，如果我从模式中选择图片1，则该模式应关闭，并且图片的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

因此，要执行此操作，您需要为每个图像添加一个click事件监听器。

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

Answer 2

您必须使用Javascript执行此操作。在jQuery中：

//prevent default action
$('.modal-body a').click(function(e) {
    e.preventDefault();
});


$('.modal-body img').on('click', function(e){
    //store the target url in a variable
    let source = $(this).attr('src');
    console.log(source);
    //set the user-selected image to the proper spot on the page
    $('.my-container > .middle').attr('src', source);
    //now close the modal
    closeModal();               
});


function closeModal(){
    $('#exampleModal').hide();
}

您可以使用slideToggle()而不是hide()之类的函数来调整如何关闭模式。

将模式选择中的图像选择应用于页面背景

2 个答案: