Js下一个上一个按钮来自数组

时间:2016-03-02 03:03:06

标签: javascript

我很难显示我的期间'变量,我有这个表格谁可以按期填写实际。这是我的表格:

FORM VIEW SCREEN SHOT

我只是想激活按钮箭头来更改数组中周期的值,如果将今天的周显示为默认值则是最佳的。 :d

这是我的示例代码:

form.php的

  <div class="col-lg-1 col-md-1"  style="text-align:right;">
    <a id="previous" class="btn btn-primary btn-sm btn-round"><i class=en-arrow-left8></i></a>
  </div>
  <div class="slideshow">
  <div class="col-lg-1 col-md-1" style="text-align:center;">
    <input id="act4" class=form-control name="act">
    <span class="help-block text-center" id="demo"></span>
    <hr>
    <button type=submit class="btn btn-sm btn-alt btn-primary">SAVE</button>
  </div>
  <div class="col-lg-1 col-md-1">
    <input id="tgt4" class=form-control value="" disabled>
    <span class="help-block text-center"><?PHP echo $tdy; ?></span>
  </div>
  <div class="col-lg-1 col-md-1">
    <a id="next" class="btn btn-primary btn-sm btn-round"><i class=en-arrow-right8></i></a>
  </div>

的js

<script type="text/javascript">

  var messages = [ { "Week-01" }, { "Week-02" }, { "Week-03" } ];

  var messageIndex = 0;

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

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

  document.getElementById("demo").innerHTML = messageIndex;
</script>

2 个答案:

答案 0 :(得分:0)

这应该有效。我没有测试过它。

您还需要jQuery选择器上的#ref。 将数组更改为简单数组而不是对象数组。 只需增加递减指数并确保它不会太高或太低。

<script type="text/javascript">
  var messages = [ "Week-01", "Week-02", "Week-03" ];

  var messageIndex = 0;

  $("#previous").on("click", function(){
   if(messageIndex > 0){
       messageIndex++;
       $("#demo").text(messages[messageIndex]);
   });

 $("#next").on("click", function(){
   if(messageIndex < (messages.length - 1)){
       messageIndex--;
       $("#demo").text(messages[messageIndex]);
   });
</script>

答案 1 :(得分:0)

尝试

$(function(){
//List the pages you want to include
var pageURLs = [
    "example.html",
    "example2.html",
    "example3.html",
    "example4.html"           
];

//Call the plugin
$("#page-nav").pageSequence({
    //Required
    source: pageURLs,
    //Optional
    prevText: "Previous Page",
    nextText: "Next Page",
    continuous: false
  });
 });

并在html主体中调用以下代码

 <body>
 <div id="page-nav"></div>
 </body>