Question

我遇到需要进入next和previous div内容

的情况

例如：

如果用户单击CTRL + n或next，则应转到（第一次运行）

第一个div内容（如果喜欢CTRL + n）
第二个div内容（如果喜欢CTRL + n）
第三股内容

等等.....

对于以前的模式，此模式将继续

下面是我的完整代码：

$(function(){

    // CTRL + n   ===> Next
    
    //CTRL + p    ===> Previous
    
    var index = 0;
    $('#next').on('click',function(){
        
    });
    
    $('#previous').on('click',function(){
        
    });
    
   // window.location = '#third'   should change dynamically

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#first">
  first
</a>

<a href="#second">
   second
</a>

<a href="#third">
   third
</a>

<a href="#fourth">
   fourth
</a>

<div id="first">
   <hr>
   First
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae provident quibusdam maiores laudantium rem quas doloremque expedita tempora omnis, accusantium vel, consectetur eos ratione modi alias obcaecati numquam sapiente temporibus.
   
   
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quam ipsam voluptates sit minus minima quas quasi itaque error natus, exercitationem, praesentium, laudantium voluptas ut quidem dolore? Rem, id quasi.
</div>

<div id="second">
   <hr>
   Second
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus illo harum, numquam optio iure quae ducimus ipsam velit corporis quidem omnis fugiat expedita autem vitae magni molestiae doloribus, ullam mollitia.
   
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, asperiores eum rem, nostrum provident qui sunt ut neque, consequatur quaerat repellendus error? Aliquam deleniti cum et error in, at voluptate.
</div>

<div id="third">
   <hr>
   Third 
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, officia? Id voluptatem voluptas similique, reprehenderit odit ab! Laboriosam deserunt illo est obcaecati quaerat, consequuntur, maxime quia quisquam corrupti recusandae, voluptas.
   
   
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit repellendus laborum molestiae asperiores necessitatibus repellat eveniet, obcaecati blanditiis numquam aut soluta veritatis unde, quis, dicta illo dolorem, consectetur temporibus molestias!
</div>

<div id="fourth">
   <hr>
   Fourth
   
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut ea tempore corrupti, hic vitae repudiandae quod cumque fugiat iste qui accusantium ipsam amet inventore, dignissimos magnam? Ipsam error eaque inventore!
   
   
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsa itaque eius accusantium. Necessitatibus fugiat dolorum rerum, quam praesentium, aliquam sapiente molestias maiores molestiae. Facilis officia cupiditate quae nisi animi.
</div>

<a href="#" id="next">Next</a>  |
<a href="#" id="previous">Previous</a>

这是jsfiddle：https://jsfiddle.net/jLqt2d1g/9/

Answer 1

请参阅JS小提琴链接JSFiddle(next and previous function)

$(function(){

// CTRL + n   ===> Next

//CTRL + p    ===> Previous
var id_arr=["first","second","third","fourth"];

var index = 0;
$('#next').on('click',function(){
        index++;
    var div_id = id_arr[index];
    if(index>5){
        alert('No More div in this Page');
    }else{
        alert(div_id);

      //based on div_id show the div in page
    }
});

$('#previous').on('click',function(){
    index--;
    var div_id = id_arr[index];
    if(index<0){
        alert('No More div in this Page');
    }else{
        alert(div_id);

      //based on div_id show the div in page
    }
});

// window.location ='#third'应该动态更改

}）;

我是JSfiddle中的更新代码，引用了该代码

在下一个和上一个函数的代码中，您将基于页面中div'id show div获得div_id

如何转到下一个和上一个并将其循环

1 个答案: