使用相同的模态显示不同的轮播每个不同的链接

Question

我在一个有多个 link 的网站上工作。每个 link 的点击显示相同的模态和不同的轮播。我试图将 id 传递到 link 的数据目标中，但是当打开模式时，它会显示两个轮播而不是仅选择轮播。我正在尝试找出问题所在，但我不知道，您有什么建议吗？谢谢。

<!doctype html>

<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="row" id="gallery">
  <div data-toggle="modal" data-target="#exampleModal" class="col-12 col-sm-6 col-lg-3 d-flex align-self-center bg-info justify-content-center"> <a href="" data-target="#carouselExample1" data-slide-to="0">
    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-asterisk" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" />
    </svg>
    </a> </div>
  <div data-toggle="modal" data-target="#exampleModal" class="col-12 col-sm-6 col-lg-3 d-flex align-self-center bg-info justify-content-center"> <a href="" data-target="#carouselExample1" data-slide-to="1">
    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-asterisk" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" />
    </svg>
    </a> </div>
  <div data-toggle="modal" data-target="#exampleModal" class="col-12 col-sm-6 col-lg-3 d-flex align-self-center bg-info justify-content-center"> <a href="" data-target="#carouselExample2" data-slide-to="5">
    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-asterisk" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" />
    </svg>
    </a> </div>
  <div data-toggle="modal" data-target="#exampleModal" class="col-12 col-sm-6 col-lg-3 d-flex align-self-center bg-info justify-content-center"> <a href="" data-target="#carouselExample2" data-slide-to="6">
    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-asterisk" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" />
    </svg>
    </a> </div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
      </div>
      <div class="modal-body">
        <div id="carouselExample1" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExample" data-slide-to="1"></li>
            <li data-target="#carouselExample" data-slide-to="2"></li>
            <li data-target="#carouselExample" data-slide-to="3"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1599472566844-691ad0ac7e41?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="First slide"> </div>
            <div class="carousel-item"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1599442996649-9aaa85137482?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Second slide"> </div>
            <div class="carousel-item"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1546111380-cfca9a43dd85?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Third slide"> </div>
            <div class="carousel-item"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1547288242-f3d375fc7b5f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Fourth slide"> </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
        <div id="carouselExample2" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExample" data-slide-to="4" class="active"></li>
            <li data-target="#carouselExample" data-slide-to="5"></li>
            <li data-target="#carouselExample" data-slide-to="6"></li>
            <li data-target="#carouselExample" data-slide-to="7"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1600497299298-9d99c0db6154?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="First slide"> </div>
            <div class="carousel-item"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1601682633973-a76aa17a7844?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Second slide"> </div>
            <div class="carousel-item"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1546111380-cfca9a43dd85?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Third slide"> </div>
            <div class="carousel-item"> <img class="d-block w-100" src="https://images.unsplash.com/photo-1547288242-f3d375fc7b5f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Fourth slide"> </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 
<script>
        $("#exampleModal").on("show.bs.modal", function (event) {
  var a = $(event.relatedTarget); // Button that triggered the modal
  var recipient = a.data("div"); //  Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this);
  modal.find("#id").attr(".carousel");
  modal.find(".modal-body div");
});

        </script>
</body>
</html>

Answer 1

您可以使用 JavaScript 动态更改 <div> 的可见性。

首先，为所有四个 <a> 标签添加 onclick 函数：

<a href="" onclick="showContent(this)" data-target="#carouselExample1" data-slide-to="0">

这将在您单击它时调用一个函数。

然后，将以下函数添加到您的 <script> :

function showContent(object){
  if (object.dataset.target == '#carouselExample1' ){
        document.getElementById("carouselExample2").style.display = "none";
        document.getElementById("carouselExample1").style.display = "block";
    }
    else{
        document.getElementById("carouselExample1").style.display = "none";
        document.getElementById("carouselExample2").style.display = "block";
    }
}

以上函数将检查您点击的 link 的 data-target 和根据它 show/hide 的 div。

我建议查看 JavaScript HTML DOM 事件以获取更多信息。

使用相同的模态显示不同的轮播每个不同的链接

Make different links with same modal displays different carousels each one

modal-dialog

twitter-bootstrap

bootstrap-modal

bootstrap-4