Question

我想为json数组创建Next / Previous按钮，但我无法让它工作。这是我试过的最后一个

 <div id="text"></div>
 <button name="prev">go to previous div</button>
<button name="next">go to next div</button>
 <script>

myFunction([
{
"text": "text0"
},
{
"text": "text1"
},
{
"text": "text2"
},
{
"text": "text3"
}
]);


function myFunction(arr) {
    var out = "";
    var i ;
    out = '<p>' +  arr[i].text + '</p> <br>';
    document.getElementById("text").innerHTML = out;
}
</script>

Answer 1

-T 127.0.0.1:8085

Answer 2

您可以将json数据转换为string，或者更好地说html $.each，如下所示。当您标记为jQuery时，此处为jQuery方法：

myFunction([{
    "text": "text0"
  },
  {
    "text": "text1"
  },
  {
    "text": "text2"
  },
  {
    "text": "text3"
  }
]);


function myFunction(arr) {

  $.each(arr, function(i, v) {
    $('#text').append('<div>' + v.text + '</div>');
  });

}
var divs = $('.mydivs>div');
var now = 0;
divs.hide().first().show();
$("button[name=next]").click(function(e) {
  divs.eq(now).hide();
  now = (now + 1 < divs.length) ? now + 1 : 0;
  divs.eq(now).show();
});
$("button[name=prev]").click(function(e) {
  divs.eq(now).hide();
  now = (now > 0) ? now - 1 : divs.length - 1;
  divs.eq(now).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text" class="mydivs"></div>
<button name="prev">go to previous div</button>
<button name="next">go to next div</button>

使用javascript的下一个和之前的JSON数据

2 个答案: