Question

JavaScript绝对不是我的主要专业领域，因此我希望对我在这里做错的人很痛苦。

我当前的代码“有效”是因为它可以完成工作，但是存在一些问题。我想做的是让我的模式包含图像，并且当用户单击或选择图像时，模式会关闭，并且他们选择的图像将成为主容器的背景图像。我的代码目前正在执行此操作，但是选择时并不会关闭模式，最重要的是，一旦激活并选择了图像，每一次操作整个页面就会滞后3-4秒。

我现在模态中只有2张图像，因此它不会加载大量图像，并且在我单击该模态中的图像以激活侦听器之前，页面上的性能都很好。

理想情况下，我想从数据库中将图像URL加载到php数组中，循环运行模式以显示它们，然后将其加载到JS中，但是一旦我知道JS是声音。

这里提供的任何帮助都将受到极大的赞赏，主要是针对更干净，更好的JS代码。

当前静态CSS：

.my-container>.middle {
    flex-grow: 1;
    padding:30px;
    background-image: url('images/bg_orange.svg');
    background-size: cover;
}

所以我只是试图替换图像URL，但仍然保留背景尺寸的封面。

HTML和JS：

<div class="container-fluid my-container">
    <!-- Background image modal -->
    <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">
                    <img style="width: 200px; height: 200px;" src="images/bg_orange.svg">
                    <img style="width: 200px; height: 200px;" src="images/bg_green.svg">
                </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>
    <div class="row middle">
        <div class="col-lg-12"></div>
    </div>
</div>

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

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

    function closeModal() {
        ('#exampleModal').hide();
    }
</script>

Answer 1

我不确定页面滞后，但是模式关闭问题是由于

中缺少$

('#exampleModal').hide();

此外，尽管这将删除模式的<div>，但未正确关闭。引导程序行是

$('#exampleModal').modal('hide');

还有另一个小问题：您正在更改background，这将重置其他一些CSS属性。如果要更改图像，请使用background-image

完整的示例：

$('#exampleModal .modal-body img').click(function() {
  const src = $(this).attr("src");
  $('.my-container > .middle').css("background-image", `url(${src})`);
  $('#exampleModal').modal('hide');
});

.my-container>.middle {
  flex-grow: 1;
  padding: 30px;
  background-image: url('images/bg_orange.svg');
  background-size: cover;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<div class="container-fluid my-container">
  <!-- Background image modal -->
  <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">
          <img style="width: 200px; height: 200px;" src="http://via.placeholder.com/200/FFB30F">
          <img style="width: 200px; height: 200px;" src="http://via.placeholder.com/200/44ff44">
        </div>
      </div>
    </div>
  </div>
  <div class="row middle">
    <div class="col-lg-12">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Select background image
</button>
    </div>
  </div>
</div>

Answer 2

我将假设您正在使用Bootstrap。也许使用模式API会有所帮助：https://getbootstrap.com/docs/4.0/components/modal/#modalhide

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

通过JS应用图像背景的问题

2 个答案: