Question

我有一个超过12个元素的数组，即[a，b，c，d，e，f，g，h，i，j，k，l]

在下面的UI中，这就是我希望它以3 X 3网格显示的方式。

a b c d e f g h <>

其中＆lt;＆gt;是一个加载更多按钮

在每次后续加载时点击更多按钮我需要显示

i j k l a b c d <>

等等

e f g h i j k l <>

基本上我想循环到同一个数组。一次将显示8个元素以及＆lt;＆gt;按钮。我有逻辑显示在网格准备好，但加载更多我有困难。关于我应该如何进行的任何指导？

Answer 1

您可以使用简单的for循环并生成HTML

＆＃13;

var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'],
  // variable for holding current index position
  curPos = 0;

var res = document.getElementById('result');

function gen() {
  // initialize an empty string
  var str = '';
  // iterate 8 times
  for (var j = 0; j < 8; j++) {
    // generate the string
    str += arr[(curPos + j) % arr.length] // get the array element 
      + (j % 3 == 2 ? '<br>' : '&nbsp;&nbsp;'); // ad `br` tag based on position
  }
  // add the button at the end
  str += '<button onclick="gen()">&lt;&gt;</button>'
  // update current index position
  curPos = (curPos + 8) % arr.length;
  // update the html content
  res.innerHTML = str;
}
// call the function to generate initial content
gen();

＆＃13;

<div id="result"></div>

＆＃13;

Answer 2

我认为你需要这样的东西：

var start = 0;
var arr = [ a,b,c,d,e,f,g,h,i,j,k,l];

function nextChunk(howMany) {
    var result = [];
    while (howMany--) {
        result.push(arr[start]);
        start = (start + 1) % arr.length;
    }
    return result;
}

Answer 3

您可以在所需部分上使用闭包来生成值。

＆＃13;

var array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'],
    getNext = function (array, n) {
        var p = 0;
        return function () {
            var i, a = [];
            for (i = 0; i < n; i++) {
                (i % 3) || a.push([]);
                a[a.length - 1].push(array[p]);
                p++;
                p %= array.length;
            }
            document.getElementById('out').innerHTML = a.map(function (b) { return b.join(' '); }).join('<br>') + ' <button onclick="getNext()">&lt;&gt; </button>'
        };
    }(array, 8);

getNext();

＆＃13;

<div id="out"></div>

＆＃13;

Answer 4

我创建了一个简单的函数，它将通过正数偏移数组。它将生成新数组，您可以使用相同的逻辑来显示您已有的网格。

function offsetArray(arr, offset){
    return arr.reduce( function(prev, curr, i) {
        prev.push(arr[ (i+offset) % arr.length ]); return prev
    }, [])
}


offsetArray(['a','b','c','d','e','f','g','h','i','j','k','l'], 1) //returns ["b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "a"]
offsetArray(['a','b','c','d','e','f','g','h','i','j','k','l'], 5) //returns ["f", "g", "h", "i", "j", "k", "l", "a", "b", "c", "d", "e"]

Answer 5

这是基于javascript上的静态变量的简单解决方案

$mysqli = new mysqli("localhost", "my_user", "my_password", "world");
$stmt = $mysqli->prepare("INSERT INTO users VALUES ('',?,?,?,?,?,?,'0')")

$stmt->bind_param('ssssss', $un, $fn, $ln, $em, $pswd, $d);
$stmt->execute();
$stmt->close();

单击

5 个答案: