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

此外，您可以创建一个“显示”功能来显示正确的元素，“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();

  });
});

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

从数组中显示某些元素？

3 个答案: