javascript - 带有播放/暂停按钮的多个 Bootstrap 轮播

Question

如何修改以下代码，使播放/暂停按钮仅适用于单个轮播？我希望他们都独立。有没有办法将点击功能与父容器联系起来？

JS:

$(function () {
       $('.carousel').carousel({
           interval: 1000,
           pause: "false"
       });
       $('.carousel .carousel-controls .play').click(function () {
           $('.carousel').carousel('cycle');
       });
       $('.carousel .carousel-controls .pause').click(function () {
           $('.carousel').carousel('pause');
       });
    });

HTML:

<div id="content">
    <div class="carousel slide" id="carouselExampleControls">
        <div class="carousel-controls">
            <a data-slide="prev" href="#carouselExampleControls" role="button">Previous</a> <a class="play" href="#" role="button">Play</a> <a class="pause" href="#" role="button">Pause</a> <a data-slide="next" href="#carouselExampleControls" role="button">Next</a>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
            <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=cccccc"></div>
            <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
        </div>
    </div>

    <div class="carousel slide" id="carouselExampleControls">
        <div class="carousel-controls">
            <a data-slide="prev" href="#carouselExampleControls" role="button">Previous</a> <a class="play" href="#" role="button">Play</a> <a class="pause" href="#" role="button">Pause</a> <a data-slide="next" href="#carouselExampleControls" role="button">Next</a>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
            <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=cccccc"></div>
            <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
        </div>
    </div>
</div>

Answer 1

您可以使用 closest() 找到被点击按钮的父级 .carousel。

$(function() {
  $('.carousel').carousel({
    interval: 1000,
    pause: "false"
  });
  $('.carousel .carousel-controls .play').click(function() {
    $(this).closest('.carousel').carousel('cycle');
  });
  $('.carousel .carousel-controls .pause').click(function() {
    $(this).closest('.carousel').carousel('pause');
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/css/bootstrap-slider.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/bootstrap-slider.min.js"></script>

<div id="content">
  <div class="carousel slide" id="carouselExampleControls">
    <div class="carousel-controls">
      <a data-slide="prev" href="#carouselExampleControls" role="button">Previous</a> <a class="play" href="#" role="button">Play</a> <a class="pause" href="#" role="button">Pause</a> <a data-slide="next" href="#carouselExampleControls" role="button">Next</a>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
      <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=cccccc"></div>
      <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
    </div>
  </div>

  <div class="carousel slide" id="carouselExampleControls">
    <div class="carousel-controls">
      <a data-slide="prev" href="#carouselExampleControls" role="button">Previous</a> <a class="play" href="#" role="button">Play</a> <a class="pause" href="#" role="button">Pause</a> <a data-slide="next" href="#carouselExampleControls" role="button">Next</a>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
      <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=cccccc"></div>
      <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
    </div>
  </div>
</div>