Question

我使用bootstrap轮播，我需要根据当前可见的幻灯片显示div。我想我可以获取data-slide-to属性值并使用它来显示具有匹配data-carousel-slide值的div。我无法获得data-slide-to value。以下是我到目前为止的情况。

HTML

<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class=""></li>
    <li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>

以上链接可让我们转到特定幻灯片 - 您可以查看this 有关旋转木马的更多细节。再往下，我创建了一些包含我要显示的文本的div。

HTML 2

<div class="carousel-slide-main-data" id="data-0" data-carousel-slide="0">
    <h4>Slide Number One</h4>
    <p>
        Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.
        Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    </p>
</div>
<div class="carousel-slide-main-data" id="data-1" data-carousel-slide="1">
    <h4>Slide Number Two</h4>
    <p>
        Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.
        Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    </p>
</div>

最后，这是我尝试使用的JS

function openData() {
    var slide_to = $('.carousel-indicators').children();
    console.log(slide_to);
}

$('#myCarousel').carousel({ interval: false });
$('#myCarousel').on('slid.bs.carousel', openData);

我似乎无法定位正确的li代码，因此无法获得数据 - 幻灯片价值 - 任何帮助都会很棒。

Answer 1

如果您跟踪（应该）传递给处理程序的Event对象，您可以跟踪当前活动幻灯片的内容：

function openData(e) {
    // this is the visible slide - i.e. probably a .carousel-inner .item element
    console.log($(e.relatedTarget));
    ...
}

Answer 2

与@gmsecrieru类似，您可以获取有关滑动事件的数据，包括新激活的幻灯片。然后，您可以获取该幻灯片的索引，并使用attribute equals选择器找到相关元素。

请注意，这取决于JS中未更改的数据属性（我们用于选择元素的标记不会在加载时更改）。

请参阅下面的工作示例。

＆＃13;

function openData(e) {
    var slide_to = 0;
    if(e) {
      slide_to = $(e.relatedTarget).index();
    }
    $('.carousel-slide-main-data').hide();
    $('.carousel-slide-main-data').filter("[data-carousel-slide='"+slide_to+"']").show();
}

$('#myCarousel').carousel({ interval: false });
$('#myCarousel').on('slid.bs.carousel', openData);

openData();

＆＃13;

.carousel-slide-main-data {
  display:none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://lorempixel.com/600/400/?1" alt="...">
      <div class="carousel-caption">
        First Carousel Item
      </div>
    </div>
    <div class="item">
      <img src="http://lorempixel.com/600/400?2" alt="...">
      <div class="carousel-caption">
        Second Carousel Item
      </div>
    </div>
    <div class="item">
      <img src="http://lorempixel.com/600/400?3" alt="...">
      <div class="carousel-caption">
        Third Carousel Item
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<div class="carousel-slide-main-data" id="data-0" data-carousel-slide="0">
    <h4>Slide Number One</h4>
    <p>
        Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.
        Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    </p>
</div>
<div class="carousel-slide-main-data" id="data-1" data-carousel-slide="1">
    <h4>Slide Number Two</h4>
    <p>
        Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.
        Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    </p>
</div>

＆＃13;

Answer 3

如果有兴趣的话，我可以通过以下代码实现我想要的目标。

function qs(key) {
    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
    var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
    var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
    if (Math.floor(slide) == slide && $.isNumeric(slide))
        return parseInt(slide);
    else
        return 0;
  } //end qs
  function displayData(key) {
    $('#data-' + key).css('display', 'block');
  }// end displayData
  function openData() {
    var slide_to = $('.carousel-indicators li.active').eq(0).data('slide-to');
    var carousel_data = $('.carousel-slide-main-data').children();
    carousel_data.css('display', 'none');
    displayData(slide_to);
  }

  $('#myCarousel').carousel({interval: false});
  $('#myCarousel').carousel(qs('slide'));
  displayData(qs('slide'));
  $('#myCarousel').on('slid.bs.carousel', openData);

因此，上面的代码检查我们应该在页面加载时启动哪个幻灯片（根据URL中的get变量），然后我们显示与幻灯片匹配的div，然后当新幻灯片进来时我们得到幻灯片 - 重视并传递给displayData，但就在此之前我们关闭任何当前显示的内容div - 它可能不是最好的但至少它正在工作，如果有人可以改进它，请让我知道 - 有一个好的。

使用.children（）

3 个答案: