设置下一个和上一个 href

Question

我遇到了一些问题，我现在遇到的是 div 中呈现的图像，并且当用户单击图像时 div 中有锚标记覆盖屏幕将在我必须显示 pdf 文件的地方打开我现在使用了 TouchPdf 插件我想要的是覆盖屏幕上会有箭头按钮，它将导航到下一个 pdf 文件并显示在覆盖 screen.I 中越来越困难实现这一点谢谢大家

这是图像的渲染方式

<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，因为有单独的 div，并且其中只有锚标记。

Answer 1

问题是您正在使用

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

问题是点击事件发生在 a 标签上，而 # 位于 page.You 的顶部，应该始终使用 javascript:void(0)。

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

Answer 2

您需要创建一个包含所有 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. 
});

设置下一个和上一个 href

Setting next and previous href

html

javascript

jquery

href