从2d数组中提取两个值但仅显示一个

Hi I'm attempting to pull only the first word in the array I've built — and then on click of "flip" — show the antonym it's paired with. i.e. pull 0 and 1 but only show 0 until a button is clicked (then have 0 switch out for 1). The code below works fine, but as of right now, it's pulling and appending both words to #input.

嗨,我试图只拉出我构建的数组中的第一个单词 - 然后单击“翻转” - 显示它与之配对的反义词。即拉0和1但只显示0直到单击一个按钮(然后0切换为1)。下面的代码工作正常,但截至目前,它正在拉动并将两个单词附加到#input。

Here's my JS:

这是我的JS:

var words = [];
words[0] = ['Budding','Accomplished']; 
words[1] = ['Curious','Certain']; 
words[2] = ['Realistic','Idealistic']; 
words[3] = ['Practicle','Imaginative']; 

function random_sort () {
      return (0.5 - Math.random() );
}

words.sort(random_sort);

var i = 0,
    n = words.length;

$("#forward").data('dir', 1);
$("#back").data('dir', -1);

$("#forward, #back").on('click', function() {
    i = (i + $(this).data('dir') + n) % n;
    $("#input").hide().html(words[i]).fadeIn(100);
    $(words[i][1]).hide();
});

$("#back").trigger('click');

and my html:

和我的HTML:

<object id="back" type="image/svg+xml" data="images/arrow.svg"></object>
<p id="input"></p>
<object id="forward" type="image/svg+xml" data="images/arrow.svg"></object>

<img id="flip" src="images/fliptext.svg">

Any help is much appreciated. Thanks!

任何帮助深表感谢。谢谢!

1 个解决方案

#1

Your issue is $("#input2").hide().html(words[i]).fadeIn(100); specifically html(words[i]) which is equal to html(['Budding','Accomplished']) and will concatenate the array before adding it to the html.

你的问题是$(“#input2”)。hide()。html(words [i])。fadeIn(100);特别是html(words [i])等于html(['Budding','Accomplished'])并在将数组添加到html之前连接数组。

Change that to $("#input2").hide().html(words[i][0]).fadeIn(100); where words[i][0] is specifically selecting the word at the first index in the array.

将其更改为$(“#input2”)。hide()。html(words [i] [0])。fadeIn(100);其中words [i] [0]专门选择数组中第一个索引处的单词。

var words = [];
words[0] = ['Budding','Accomplished']; 
words[1] = ['Curious','Certain']; 
words[2] = ['Realistic','Idealistic']; 
words[3] = ['Practicle','Imaginative']; 
 
var i=0;
$("#input").hide().html(words[i]).fadeIn(100);
$("#input2").hide().html(words[i][0]).fadeIn(100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>Wrong</strong><div id="input"> </div><br>
<strong>Right</strong><div id="input2"> </div>