Javascript 洗牌后的无限下一个 JSON

Question

我有双语 JSON，开始时随机播放。如果 JSON 的索引等于按下按钮的最大索引，我想让它重新开始。但我被困在这里，因为我对 JavaScript 不是很熟悉。请帮助制作它，以便单击 WINE 按钮 returns 到随机播放 JSON.

的开头

// Detect language into variable and log it
var userLang = navigator.language || navigator.userLanguage; 
console.log("The browser language is: " + userLang);

var alcoscroll = {
    "wine": [{
        "en": "Wine Drink 1",
        "es": "Vino 1",
    }, {
        "en": "Drink 2",
        "es": "Vino 2",
    }, {
        "en": "Drink 3",
        "es": "Vino 3",
    }, {
        "en": "Drink 4",
        "es": "Vino",
    }]
};

alcoscroll.wine.sort(function (alcoscroll) {return Math.random() - 0.5;}); // Sort alcoscroll
console.log(alcoscroll);

var index = 0; // Starting index of JSON object
var maxx  = alcoscroll.wine.length-1; // Max ID number (JSON index number)
var item = alcoscroll.wine[index]; // Current index sniffer
var next = document.getElementById('refbtn'); // Button to move to next one

displayItem(item);

next.addEventListener('click', function() {
    displayItem(alcoscroll.wine[++index]);
});

console.log("MAXIndex is: " + maxx)

function displayItem(item) {
// Catch item number into function ERROR HERE
intitem = alcoscroll.wine[index];
console.log("INT item is: " + intitem);

// English or Spanish radical choice
if (userLang === "en-US") {
title.innerText = item.en;
} else {
title.innerText = item.es;
}
    console.log("Index is: " + index)
    
    if (intitem == maxx) { // If it's the last index of JSON object ERROR HERE
    console.log("LAST")
    next.addEventListener('click', function() {
    intitem = 0; // Current index sniffer ERROR HERE
});
    } else
    {console.log("NOT last")}
}

<div class="container">
  <div>
    <div id="title"></div>
  </div>
  <button id="refbtn">WINE</button>
</div>

Answer 1

问题出在这段代码中：

if (intitem == maxx) { // If it's the last index of JSON object ERROR HERE
    console.log("LAST")
    next.addEventListener('click', function() {
        intitem = 0; // Current index sniffer ERROR HERE
    });
}

当您应该比较 index 和 maxx 时，您却在比较 intitem 和 maxx。此外，您不需要添加另一个事件侦听器，只需重置 index 值即可。将其更改为：

if (index == maxx) { // If it's the last index of JSON object ERROR HERE
    console.log("LAST");
    index = -1; // Index should be -1 because it's incremented before getting
                // the item.
}

这是更新后的代码段：

// Detect language into variable and log it
var userLang = navigator.language || navigator.userLanguage; 
console.log("The browser language is: " + userLang);

var alcoscroll = {
    "wine": [{
        "en": "Wine Drink 1",
        "es": "Vino 1",
    }, {
        "en": "Drink 2",
        "es": "Vino 2",
    }, {
        "en": "Drink 3",
        "es": "Vino 3",
    }, {
        "en": "Drink 4",
        "es": "Vino",
    }]
};

alcoscroll.wine.sort(function (alcoscroll) {return Math.random() - 0.5;}); // Sort alcoscroll
console.log(alcoscroll);

var index = 0; // Starting index of JSON object
var maxx  = alcoscroll.wine.length-1; // Max ID number (JSON index number)
var item = alcoscroll.wine[index]; // Current index sniffer
var next = document.getElementById('refbtn'); // Button to move to next one

displayItem(item);

next.addEventListener('click', function() {
    displayItem(alcoscroll.wine[++index]);
});

console.log("MAXIndex is: " + maxx)

function displayItem(item) {
// Catch item number into function ERROR HERE
intitem = alcoscroll.wine[index];
console.log("INT item is: " + intitem);

// English or Spanish radical choice
if (userLang === "en-US") {
title.innerText = item.en;
} else {
title.innerText = item.es;
}
    console.log("Index is: " + index)
    
    if (index == maxx) { // If it's the last index of JSON object ERROR HERE
    console.log("LAST");
    index = -1; // Current index sniffer ERROR HERE
    } else
    {console.log("NOT last")}
}

<div class="container">
  <div>
    <div id="title"></div>
  </div>
  <button id="refbtn">WINE</button>
</div>

Javascript 洗牌后的无限下一个 JSON

Javascript infinite next in shuffled JSON

javascript

multilingual

json

shuffle

next