Question

我面临一些问题我现在拥有的是div中的图像渲染以及当用户点击图像时div内的锚标记一个覆盖屏幕将打开，我必须显示pdf文件我现在使用TouchPdf插件我想要的是覆盖屏幕上将有箭头按钮，将导航到下一个pdf文件并显示在覆盖屏幕上。我很难实现这一点全部谢谢

这是如何呈现图像

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <div class="image-div-conents">
       <h3 class="circle">BI</h3>
           <div  class="doc-name-date">
                  <!-- <ul class="list-inline"> -->
                       <span class="bill">Bill</span>
                           <span  class="bill">2-02-2017</span>
                            <!-- </ul> -->
                            </div>
                        </div>
                            <a  href="#">
                                <img  height="300px" class="img-responsive" src="http://i156.photobucket.com/albums/t20/warjhenz/1000x1000.gif" alt="">
                                <div class="validitity"><span>Validitity: Forever</span></div>
                            </a>
                    </div>


<div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <div class="image-div-conents">
       <h3 class="circle">BI</h3>
           <div  class="doc-name-date">
                  <!-- <ul class="list-inline"> -->
                       <span class="bill">Bill</span>
                           <span  class="bill">2-02-2017</span>
                            <!-- </ul> -->
                            </div>
                        </div>
                            <a  href="#">
                                <img  height="300px" class="img-responsive" src="http://i156.photobucket.com/albums/t20/warjhenz/1000x1000.gif" alt="">
                                <div class="validitity"><span>Validitity: Forever</span></div>
                            </a>
                    </div>

这将继续并且图像水平渲染

我试过的是 -

添加点击事件

$('.thumb a').on('click',function(){
 alert($(this).attr('href'));
 alert($(this).index());
});

但每个href的索引总是1，因为有seprate div，并且里面只有锚标记。

Answer 1

您需要创建一个包含所有div的最顶层父元素你可以创建一个div

<div class="parent> all your divs etc </div>

$('.thumb a').on('click',function(){
 alert($(this).parentsUntil("thumb").index()); //Here the index will be the clicked index. 
});

Answer 2

问题是你正在使用

<a href="#"></a>

问题在于，点击事件位于a标记上，而#位于页面顶部。您应该始终使用javascript:void(0)。

<a href="javascript:void(0)"></a>

设置下一个和上一个href

2 个答案: