javascript - 输入等于一个数组的字符串，并从另一个数组的相同位置获取字符串 - JavaScript

Question

所以我必须用字符串进行数组:

var words = ['ab', 'bc', 'cd', 'fe'];
var wordsLetters = ['a-b', 'b-c', 'c-d', 'f-e'];

单词列在列表中。因此，当您单击其中一个单词时，它会在 b 标签中显示您单击的单词。

但我一直在努力尝试做出一个 if 语句，该语句可以看到您单击的单词并显示该单词的字母。因此，如果单击 ab，则会显示 ab 和 a-b。

我做了一个 if 语句，可以检查您单击的单词和单词字母，但它只适用于单词，所以这意味着我必须做 4 个 if 语句，但我想知道您是否只需要发表一项声明？

var words = ['ab', 'bc', 'cd', 'fe'];
var wordsLetters = ['a-b', 'b-c', 'c-d', 'f-e'];


function getId() {
  var clickedId = event.srcElement.id;
  //console.log('word ID: ' + clickedId);
  var word = document.getElementById(clickedId).firstElementChild.innerHTML;

  document.getElementById('wordsPlaceholder').innerHTML = word;

  //if () {
  //
  //}
}

li {
  padding: 10px;
  width: 100%;
  text-align: center;
  list-style: none;
  background-color: gray;
  margin: 5px 0px 5px -30px;
}

<ul>
  <li id="w1" onclick="getId()"><b>ab</b></li>
  <li id="w2" onclick="getId()"><b>bc</b></li>
  <li id="w3" onclick="getId()"><b>cd</b></li>
  <li id="w4" onclick="getId()"><b>de</b></li>
</ul>
<hr>
<div style="text-align:center;">
  <b>words: </b><u><b id="wordsPlaceholder"></b></u>
  <div style="display:block;"></div>
  <b>wordsLetters: </b></u><b id="wordsLettersPlaceholder"></b></u>
</div>

Answer 1

您可以使用indexOf()获取索引并在相应的数组中使用它。

我还将其传递到点击事件中，这样您在单击单词本身时就不会收到错误。

需要注意的一点是 b和 u标签已经改变了 HTML5 中的语义，如果您想要的只是粗体和下划线文本，那么请使用 css

var words = ['ab', 'bc', 'cd', 'fe'];
var wordsLetters = ['a-b', 'b-c', 'c-d', 'f-e'];


function getId(element) {
  var word = element.firstElementChild.innerHTML;
  document.getElementById('wordsPlaceholder').innerHTML = word;
  document.getElementById('wordsLettersPlaceholder').innerHTML = wordsLetters[words.indexOf(word)];
}

<ul>
  <li id="w1" onclick="getId(this)"><b>ab</b></li>
  <li id="w2" onclick="getId(this)"><b>bc</b></li>
  <li id="w3" onclick="getId(this)"><b>cd</b></li>
  <li id="w4" onclick="getId(this)"><b>de</b></li>
</ul>
<div style="text-align:center;">
  <b>words: </b><u><b id="wordsPlaceholder"></b></u>
  <div style="display:block;"></div>
  <b>wordsLetters: </b><u><b id="wordsLettersPlaceholder"></b></u>
</div>