显示数组中的某些元素？

Question

我有一个显示特定元素的两列布局（例如，左列的传记，右列的新闻）。我有一组位于数组中的元素。我想做的是单击一个按钮，第一列内容将分离并附加到隐藏元素中，第二列移动到第一个，然后是数组中的下一个元素，将自身附加到现在空的第二个列。

这样做的最佳方法是什么？我有一个关于分离/附加元素的想法，但我无法弄清楚如何实际抓取数组中的下一个元素来显示它？

这里是 HTML 布局，我还附加了一个包含所有代码的 JSFiddle，因为这里有很多内容。

<div class="container">
    <section class="main"></section>
</div>
<div class="view--wrapper">
    <div class="view">CONTENT</div>
    <div class="view">CONTENT</div>
    <div class="view">CONTENT</div>
    <div class="view">CONTENT</div>
</div>

https://jsfiddle.net/7fx5s8an/1/

Answer 1

我完成了你的“下一个”功能，如果你有什么问题可以评论。

var activeIndex = 0;
var totalSlides;
var viewArray;//declare viewarray here
var reset = function() {
  activeIndex = 0;
};

var init = function(totaSlides) {
  var obj = $(".view");
  viewArray = $.makeArray(obj);
  totalSlides = viewArray.length;
  console.log(totalSlides);
  console.log(viewArray);

  reset();

  $(".main").append(viewArray[0]);
  $(".main").append(viewArray[1]);
};  

$(document).ready(function(){
  init();

  $("#next").on("click", function(){
    activeIndex=activeIndex+1;//check this index he must be between 0 and totalSlides -1

    console.log(activeIndex);


    $(".main").html('');//i remove old viewArray

    //show two next item
    $(".main").append(viewArray[activeIndex]);
    $(".main").append(viewArray[activeIndex+1]);
  });
});

你还可以创建一个“显示”函数来显示正确的元素，“下一个”和“上一个”只是增加或减少“activeIndex”并检查这个索引是否正确。

例子：

var activeIndex = 0;
var totalSlides;
var viewArray;
var reset = function() {
  activeIndex = 0;
};

var display = function() {
        $(".main").html('');

    $(".main").append(viewArray[activeIndex]);
    $(".main").append(viewArray[activeIndex+1]);
};

var init = function(totaSlides) {
  var obj = $(".view");
  viewArray = $.makeArray(obj);
  totalSlides = viewArray.length;
  console.log(totalSlides);
  console.log(viewArray);

  reset();

  $(".main").append(viewArray[0]);
  $(".main").append(viewArray[1]);
};  

$(document).ready(function(){
  init();

  $("#next").on("click", function(){
    activeIndex=activeIndex+1;

    if(activeIndex>totalSlides-2){
            activeIndex=totalSlides-2;
    }
    console.log(activeIndex);

    display();

  });

  $("#prev").on("click", function(){
    activeIndex=activeIndex-1;

    if(activeIndex<0){
            activeIndex=0;
    }
    console.log(activeIndex);

    display();

  });
});

Answer 2

你可以让你的代码更简单
通过操作.view 元素数组

var $div = $(".main"),
    v    = $(".view").get(),
    show = 2; // how many to show

function showView() {
  $(v).hide().slice(0,show).prependTo($div).show();
} showView();

$("#prev, #next").on("click", function(){
  if(this.id==="next") v.push(v.shift());
  else v.unshift(v.pop());
  showView();
});

.container:after{content:""; display:table; clear:both;}
.view{float:left; background: #ECF00F;padding: 20px; display:none; /*HIDE INITIALLY*/}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container"><section class="main"></section></div>

<div class="view">CONTENT 1</div>
<div class="view">CONTENT 2</div>
<div class="view">CONTENT 3</div>
<div class="view">CONTENT 4</div>

<button id="prev">PREV</button>
<button id="next">NEXT</button>

Answer 3

看看这个jsfiddle。 我已经完成了你的下一个和上一个功能。

HTML

<div class="container">
  <section class="main"></section>
</div>
<div class="view--wrapper">
  <div class="view">CONTENT1</div>
  <div class="view">CONTENT2</div>
  <div class="view">CONTENT3</div>
  <div class="view">CONTENT4</div>
</div>
<a href="#" id="prev">Previous</a>
<a href="#" id="next">Next</a>

JS

var totalSlides;
var x = 0;
var y = 1;

$(document).ready(function(){
  var obj = $(".view");
  var viewArray = $.makeArray(obj);
  totalSlides = viewArray.length;

  $(".main").append(viewArray[0]);
  $(".main").append(viewArray[1]);

  $(document).on("click", "#next", function(){
    x = next(x);
    y = next(y);
    $(".main").html('');
    $(".main").append(viewArray[x]);
    $(".main").append(viewArray[y]);
  });

  $(document).on("click", "#prev", function(){
    x = prev(x);
    y = prev(y);
    $(".main").html('');
    $(".main").append(viewArray[x]);
    $(".main").append(viewArray[y]);
  });
});

function next(z) {
  if(z == totalSlides-1) {
    z = 0;
  } else {
    z++;
  }
  return z;
}

function prev(z) {
  if(z == 0) {
    z = totalSlides - 1;
  } else {
    z--;
  }
  return z;
}