jquery - 显示数组中的某个元素？

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();

  });
});