Jquery 是否显示数组中的某个元素？

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

最好的方法是什么？我有一个分离/附加元素的想法，我很难弄清楚我是如何抓取数组中的下一个元素来显示它的

这里是HTML布局，我还附加了一个JSFIDLE和所有的代码，因为在这里输入的代码太多了

<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>

内容
内容
内容
内容

我将完成您的“下一步”功能，如果您有问题，请发表评论

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]);
  });
});

此外，您还可以创建一个“display”函数来显示正确的元素，“next”和“previous”只是递增或递减“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();

  });
});

var-activeIndex=0；
var总载玻片；
var视图阵列；
var reset=函数（）{
activeIndex=0；
};
变量显示=函数（）{
$（“.main”）.html（“”）；
$（“.main”）.append（viewArray[activeIndex]）；
$（“.main”）.append（viewArray[activeIndex+1]）；
};
var init=函数（totaSlides）{
var obj=$（“.view”）；
viewArray=$.makeArray（obj）；
totalSlides=viewArray.length；
控制台日志（totalSlides）；
console.log（viewArray）；
重置（）；
$（“.main”）.append（viewArray[0]）；
$（“.main”）.append（viewArray[1]）；
};  
$（文档）.ready（函数（）{
init（）；
$（“#下一步”）。在（“单击”，函数（）{
activeIndex=activeIndex+1；
如果（activeIndex>totalSlides-2）{
activeIndex=totalSlides-2；
}
log（activeIndex）；
显示（）；
});
$（“#prev”）。在（“单击”，函数（）上）{
activeIndex=activeIndex-1；
如果（activeIndex我完成了您的“下一步”功能，如果您有问题，请发表评论

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]);
  });
});

此外，您还可以创建一个“display”函数来显示正确的元素，“next”和“previous”只是递增或递减“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();

  });
});

var-activeIndex=0；
var总载玻片；
var视图阵列；
var reset=函数（）{
activeIndex=0；
};
变量显示=函数（）{
$（“.main”）.html（“”）；
$（“.main”）.append（viewArray[activeIndex]）；
$（“.main”）.append（viewArray[activeIndex+1]）；
};
var init=函数（totaSlides）{
var obj=$（“.view”）；
viewArray=$.makeArray（obj）；
totalSlides=viewArray.length；
控制台日志（totalSlides）；
console.log（viewArray）；
重置（）；
$（“.main”）.append（viewArray[0]）；
$（“.main”）.append（viewArray[1]）；
};  
$（文档）.ready（函数（）{
init（）；
$（“#下一步”）。在（“单击”，函数（）{
activeIndex=activeIndex+1；
如果（activeIndex>totalSlides-2）{
activeIndex=totalSlides-2；
}
log（activeIndex）；
显示（）；
});
$（“#prev”）。在（“单击”，函数（）上）{
activeIndex=activeIndex-1；
如果（activeIndex），请看一下这个。
我已经完成了你的下一个和上一个功能

HTML

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

HTML

您可以简化代码方式

通过操作
.view
元素数组


var$div=$（“.main”），
v=$（“.view”）.get（），
show=2；//要显示多少个
函数showView（）{
$（v）.hide（）.slice（0，show）.prependTo（$div.show（）；
}showView（）；
$（“#上一页，#下一页”）。在（“单击”，函数（）{
if（this.id==“next”）v.push（v.shift（））；
else v.unshift（v.pop（））；
showView（）；
})；
.container:after{content:”；显示：表；清除：两者；}
.view{float:左；背景：#ECF00F；填充：20px；显示：无；/*初始隐藏*/}

内容1
内容2
内容3
内容4
上
接下来
您可以简化您的代码方式

通过操作
.view
元素数组


var$div=$（“.main”），
v=$（“.view”）.get（），
show=2；//要显示多少个
函数showView（）{
$（v）.hide（）.slice（0，show）.prependTo（$div.show（）；
}showView（）；
$（“#上一页，#下一页”）。在（“单击”，函数（）{
if（this.id==“next”）v.push（v.shift（））；
else v.unshift（v.pop（））；
showView（）；
})；
.container:after{content:”；显示：表；清除：两者；}
.view{float:左；背景：#ECF00F；填充：20px；显示：无；/*初始隐藏*/}

内容1
内容2
内容3
内容4
上
下一步
他们必须循环吗？我的意思是，[2,3][3,0][0,1]是一个有效的序列吗？他们必须循环吗？我的意思是，[2,3][3,0][0,1]是一个有效的序列吗？这太棒了。非常感谢您的快速响应，这正是我想要的。：）这太棒了。非常感谢您的快速回复。这正是我想要的。：）