单击旋转木马图示符时如何获取数据id

How to get data-id when carousel glyphicon is clicked

本文关键字:获取 id 数据 何获取 旋转木马 单击      更新时间:2023-09-26

我需要获取一个id,但它在一个滑块中,我唯一可以访问的点击事件是箭头,但它们不能获取图像的唯一id。我知道一定有一条通往div的路,但现在这有点超出我的能力范围。我确实尝试过我找到的或找到的任何东西,但到目前为止都没有成功。

滑块的代码

<div id="myCarousel" class="carousel slide fluid col-md-6 col-md-offset-3" data-ride="carousel" style="height:95%;background-color: #000;">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active" style="border:1px solid #febe27;margin-bottom:125px;"></li>
    {% for storyItem in craft.entries.section('stories').find() %}
    {% for previewImage in storyItem.slideshowImage %}  
      <li data-target="#myCarousel" data-slide-to="1" style="border:1px solid #febe27;margin-bottom:125px;"></li>
   {% endfor %}  
   {%endfor%}
</ol>
<div class="carousel-inner" role="listbox" style="height:87%;position:relative;">
  <div class="item active">
    {% for storyItem in craft.entries.section('stories').limit(1) %}
     {% for previewImage in storyItem.slideshowImage %}  
    <div id="{{storyItem.id}}" class="imgContentWrapper 1" data-id="{{storyItem.id}}"><a href="#"><img src="{{ previewImage.url('slideshowImage') }}" alt="" border="0" /></a>
    </div>
    {% endfor %}
  {%endfor%}
</div>
{% for storyItem in craft.entries.section('stories').offset(1) %}
{% for previewImage in storyItem.slideshowImage %}  
  <div class="item ">
    <div id="{{storyItem.id}}" class="imgContentWrapper" data-id="{{storyItem.id}}"><a href="#"><img src="{{ previewImage.url('slideshowImage') }}" alt="" border="0" /></a>
    </div>
  </div>
  {% endfor %} 
  {%endfor%}
 </div>
 <a class="left carousel-control" href="#myCarousel"  role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="margin-left:-25px;"></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" style="margin-right:-25px;"></span>
  <span class="sr-only">Next</span>
</a>

我正试图在字形图标"click"上获取div中的{{storyItem.id}}(有两个活动项和常规项)。

非常感谢您的帮助。

这应该能完成任务,伙计。。。

$('.glyphicon-chevron-left, .glyphicon-chevron-right').on('click', function() {
    var id = $('.carousel-inner').find('item.active').find('.imgContentWrapper').data('id');
});

我假设a.carousel-control与您的图像位于同一个#myCarouseldiv中。如果是这样的话,你可以遍历到父图像并找到你想要的图像,如下所示:

$('.carousel-control').on('click', function() {
    var imageId = $(this).parent().find('#your_image_selector');
});