Question

我尝试使用循环制作下一页/上一页时遇到了一些问题。
单击向下箭头按钮显示

但是当单击向上箭头按钮时，我希望它返回

但相反，反向使用reverse（）并没有起作用。

任何人都可以帮助我吗？

这是我的代码

var newsSubject = new Array();
var newsURL = new Array();

$.ajax({
    async: true,
    url: 'https://api.myjson.com/bins/2nqki',
    data: '',
    accepts: 'application/json',
    dataType: 'json',
    success: function(data) {
        var obj = data.Data;
        var output = '<ul>';
        var index = 0;
        for(var i = 0; i < obj.length; i++) {
            newsSubject.push(data.Data[i].Subject);
            newsURL.push(data.Data[i].Url);
        }          
        for(var k = 0; k < 5; k++) {
            output += '<li class="news-post"> <a href="' + newsURL[index] + '" data-tag="exclusive">' + newsSubject[index] + '</a> </li>';
            index = (index + 1);
        } 
        output += '</ul>'
        $('.news-array').html(output);
        $('.next-news').click(function(e){
            $('.news-post').each(function(){
                if (index < obj.length) {
                    index = index + 1;
                    $(this).find('a').html(newsSubject[index - 1]);
                }  
            });
            return false;
        });
        $('.prev-news').click(function(e){
            $('.news-post').each(function(){
                if(index != 0) {
                    index = index - 1;
                    $(this).find('a').html(newsSubject[index - 5]);
                }
             });
            return false;
        });               
    }
});

这里是jsfiddle

https://jsfiddle.net/ykLsm3da/1/

Answer 1

正如@Pointy所说，你正在倒退。

您需要做的就是先减去索引，然后再向前迭代：

    $('.prev-news').click(function(e){
        if (index < 10)
            return false;
        index -= 10;
        $('.news-post').each(function(){
            if (index < obj.length) {
                index++;
                $(this).find('a').html(newsSubject[index - 1]);
            }
         });
        return false;
    });

这是更新的jsfiddle：https://jsfiddle.net/ykLsm3da/2/

请注意，您未更新href属性。您还需要这样做以更新链接：

$(this).find('a').attr('href', newsURL[index - 1]);

这是更新后的更新jsfiddle：https://jsfiddle.net/ykLsm3da/3/

Answer 2

首先，你做的是落后的步骤。你在倒计时 index = index - 1; 所以一切都会逆转。

另一方面，您没有使用干净的结构化代码。在你的情况下，你做了一些事情，然后尝试调试和更改它，只要你需要满足你的需求。特别是不要改变链接。

这是一个重写代码的简单示例。请密切关注功能的分离到简单的功能。

尽量不做一些不必要的DOM操作，比如在函数中创建元素并在循环中更改另一个函数中的一些链接和文本。尽量保持干燥（不要自己重复）。

// encapsulate frontend stuff. here create some html as clean it can be.
function createListElements(data, index, end){     
    var output = '';
    while(index < end) {
        output += '<li class="news-post"><a href="' + data.Data[index].Url + '" data-tag="exclusive">' + data.Data[index].Subject + '</a></li>';
        index +=  1;
    } 
    return '<ul>' + output + '</ul>';
}
// do update the view - in this case, change everything under ".news-array"
function updateView(data, elementPerView, index){    
    var begin = Math.max(0, index);
    var end = Math.min(data.Data.length, begin + elementPerView); 
    $('.news-array').html( createListElements(data, begin, end) );
    return begin;
}
// frontend button handler
function buttonHandler(data) {
    var index = 0;
    updateView(data, elementPerView, index);
    $('.next-news').click(function(e){
        // sorry, we need one look ahead
        if (index + elementPerView < data.Data.length)
            index = updateView(data, elementPerView, index + elementPerView);
        return false;
    });
    $('.prev-news').click(function(e){
        index = updateView(data, elementPerView, index - elementPerView);
        return false;
    });               
}

var elementPerView = 4; // be flexible - 4 is a good example for 15 elements

// do some ajax - not mixed up with callback-code
$.ajax({
    async: true,
    url: 'https://api.myjson.com/bins/2nqki',
    data: '',
    accepts: 'application/json',
    dataType: 'json',
    success: buttonHandler
});

Answer 3

您需要做的就是颠倒jQuery对象的方向，

上一个箭头中的

$($('.news-post').get().reverse()).each(function(){/*your code*/});。

查看下面的代码片段以获取演示。

＆＃13;

var newsSubject = new Array();
var newsURL = new Array();

$.ajax({
  async: true,
  url: 'https://api.myjson.com/bins/2nqki',
  data: '',
  accepts: 'application/json',
  dataType: 'json',
  success: function(data) {
    var obj = data.Data;
    var output = '<ul>';
    var index = 0;
    for(var i = 0; i < obj.length; i++) {
      newsSubject.push(data.Data[i].Subject);
      newsURL.push(data.Data[i].Url);
    }          
    for(var k = 0; k < 5; k++) {
      output += '<li class="news-post"> <a href="' + newsURL[index] + '" data-tag="exclusive">' + newsSubject[index] + '</a> </li>';
      index = (index + 1);
    } 
    output += '</ul>'
    $('.news-array').html(output);
    $('.next-news').click(function(e){
      $('.news-post').each(function(){
        if (index < obj.length) {
          index = index + 1;
          $(this).find('a').html(newsSubject[index - 1]);
        }  
      });
      return false;
    });
    $('.prev-news').click(function(e){
      $($('.news-post').get().reverse()).each(function(){
        if(index != 0) {
          index = index - 1;
          $(this).find('a').html(newsSubject[index - 5]);
        }
      });
      return false;
    });               
  }
});

＆＃13;

.news-list {
  height: auto;
  -moz-border-top-right-radius: 25px;
  -o-border-top-right-radius: 25px;
  -webkit-border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  -moz-border-bottom-right-radius: 25px;
  -o-border-bottom-right-radius: 25px;
  -webkit-border-bottom-right-radius: 25px;
  overflow: hidden;
  background: white;
  border: none; }
.news-list ul {
  width: 100%;
  background: white;
  margin-bottom: 0; }
.news-list ul li .news-post {
  padding: 20px 22px 0 22px; }
.news-list ul li .news-post:hover {
  background: #4A90E2; }
.news-list ul li .news-post:hover a {
  color: white;
  border-bottom: 1px solid #4A90E2; }
.news-list ul li .triangle-up {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 10px solid #9B9B9B; }
.news-list ul li a {
  display: block;
  color: #979797;
  padding-bottom: 20px;
  border-bottom: 1px solid #BBBBBB; }
.news-list ul li .triangle-down {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #9B9B9B; }
.news-list ul .next-li {
  padding: 0 22px; }
.news-list ul .next-li a {
  border: none;
  padding-bottom: 0;
  padding: 10px 0; }
.news-list ul .next-li:hover {
  background: #4A90E2; }
.news-list ul .next-li:hover a {
  color: white;
  border-bottom: 1px solid #4A90E2; }
.news-list ul .prev-li {
  padding: 0 22px; }
.news-list ul .prev-li a {
  border-bottom: 1px solid #BBBBBB;
  padding-bottom: 0;
  padding: 10px 0; }
.news-list ul .prev-li:hover {
  background: #4A90E2; }
.news-list ul .prev-li:hover a {
  color: white;
  border-bottom: 1px solid #4A90E2; }
li {
  list-style: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-list medium-4 small-12 columns">
  <ul class="news-array-block">
    <li class="text-center prev-li"><a href="#" class="prev-news"><span class="triangle-up"></span></a></li>
    <li class="news-array"></li>

    <li class="text-center next-li"><a href="#" class="next-news"><span class="triangle-down"></span></a></li>
  </ul>
</div>

＆＃13;

使用for循环时如何防止json数据反转？

3 个答案: