Question

我确信这是一个非常基本的问题但是我对jquery很新，我不知道该怎么做。我在论坛中搜索过，我发现了一些有用的信息，但我无法弄清楚如何把它们放在一起。我正在尝试创建的是一个简单的消息框，您可以使用“下一个”和“上一个”按钮滚动浏览消息，还可以查看您正在查看的消息＃。所以基本上它在设计方面会是这样的：

$ message_title ............. $ message_＃out of $ total _＃_ messages

$ MESSAGE_CONTENT

到达最后一条消息后，您只需重新开始，这样就可以进入msg_1＆gt; msg_2＆gt; msg_4＆gt; msg_5＆gt; msg_6＆gt; msg_1再次等等。

所以我开始使用2个数组，一个用于标题，一个用于消息：

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

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

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

我有2个具有这些特定ID的div并且效果很好，但是我不知道如何将我的数组与我的指定文本代码连接起来。我尝试了类似下面的内容，但它不太起作用：

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++;
  });
  }
 });

我尝试了其他一些但没有运气。有空闲时间的人可以告诉我该怎么做吗？如果可能的话，请写下我遇到问题的完整代码，把整个问题放在一起。非常感谢您提前帮助我的任何人！

Answer 1

这应该可以做到！ 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数组，用于滚动条目

1 个答案: