jQuery的数组下一个和previous按钮在条目滚动 [英] jQuery array with next and previous buttons to scroll through entries

问题描述

我敢肯定，这是一个非常基本的问题，但是我用jQuery真新，我不知道如何做到这一点。我也通过论坛搜索，我发现位和有用的信息，但件我无法弄清楚如何把它放在一起。我试图创建一个简单的消息框，您可以通过邮件与下一个和previous按钮，滚动，也看到你看到这消息＃。所以基本上它会像这样在设计方面：

I'm sure this is a really basic question however I'm really new with jquery and I'm not sure how to do this. I did search through the forums and I found bits and pieces of helpful info but I just couldn't figure out how to put it all together. What I'm trying to create is a simple messages box where you can scroll through the messages with a "next" and "previous" button and also see which message # you're seeing. So basically it would be something like this in terms of design:

$ MESSAGE_TITLE ............. $＃消息_ $出总_＃_消息

$message_title ............. $message_# out of $total_#_messages

$ MESSAGE_CONTENT

$message_content

[preVIOUS BUTTON] - [NEXT BUTTON]

[PREVIOUS BUTTON] - [NEXT BUTTON]

一旦你到达最后一条消息，你刚开始一遍又一遍所以它会去msg_1> msg_2> msg_4> msg_5> msg_6> msg_1再等等。

Once you reach the last message, you just start over again so it would go msg_1 > msg_2 > msg_4 > msg_5 > msg_6 > msg_1 again and so forth.

于是我开始用2阵列，一个标题，一个用于消息：

So I started with 2 arrays, one for the title and one for the message:

var array-title = [ "title 1","title 2","title 3" ];
var array-message = [ "message 1","message 2","message 3" ];

我找到了一种方法来分配新文本的ID

I found a way to assign new text to an ID

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#title-div").text("title 1");
        $("#message-div").text("message 1");
    });
});

在那里我有2的div与这些特定的ID和它的伟大工程，但我不知道怎么我的阵列我将文本分配code连接。我试着像下面这样，但它确实不是那么回事：

Where I have 2 divs with those specific IDs and it works great, however I'm not sure how to connect my array with my assign text code. I tried something like the following but it didn't quite work:

var i = 0;
$(document).ready(function(){
    while ( i < array-title.length ) {
    $("#btn1").click(function(){
       $("#title-div").text( array-title[ i ] );
       $("#message-div").text( array-message[ i ] );
       $("#message-number-div").text( i + 1 );
   i++;
  });
  }
 });

我已经尝试了一些其他的东西，但没有运气。谁的人有一些空闲时间，可以请告诉我如何做到这一点？如果可能的话，请写出完整的code作为这就是我有问题，把整个事情。非常感谢你提前为任何人好心地帮我！

I've tried a few other things but no luck. Can someone who has some free time please show me how to do this? If possible, please write the full code as that's where I'm having issues, putting the whole thing together. Thank you very much in advance for anyone kind enough to help me!

推荐答案

这应该做的伎俩！ http://jsfiddle.net/skq64/1/

<div id="messageBox">
    <div id="message">
    </div>    
    <div id="previous" style="background-color: red; margin: 5px; cursor: pointer;">
        Previous
    </div>    
    <div id="next" style="background-color: red; margin: 5px; cursor: pointer;">
        Next
    </div>        
</div>

var messages = [
    {
        "author" : "john doe",
        "date" : "1-2-12",
        "content": "this is my content, as written by John!"
    },
    {
        "author" : "jane smith",
        "date" : "1-2-13",
        "content": "blah blah blah"
    },
    {
        "author" : "Some dude",
        "date" : "1-2-11",
        "content": "etc etc etc"
    },
];

var messageIndex = 0;

$("#previous").on("click", function(){
    // JavaScript modulo operator requires us to make a lengthy decrement call
    messageIndex = (messageIndex + messages.length -1) % (messages.length);    
    $("#message").text(messages[messageIndex].content);
});

$("#next").on("click", function(){
    messageIndex = (messageIndex+1) % (messages.length);    
    $("#message").text(messages[messageIndex].content);
});

$("#message").text(messages[0].content);

这篇关于jQuery的数组下一个和previous按钮在条目滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！