Question

此代码通过将每个单词格式化为句子然后格式化为HTML来显示JSON文件的内容。在鼠标悬停时，单词变为蓝色。点击它们变成红色。接下来我要做的是显示单词的翻译（已经在json数组中）onclick。

  var json = [
    [
      ["Peki", "Well"],
      ["nedir", "what"],
      ["bu", "it"],
      ...
    ]
  ];
  var arr2 = [];
  for (k = 0; k < json.length; k++) {
    var arr = json[k];
    arr2.push('<p>');
    for (i = 0; i < arr.length; i++) {
      if (arr[i][0].length == 1) {
        arr2.push(arr[i][0]);
      } else {
        arr2.push(' <span class="notclicked word ' + i + '">' + arr[i][0] + '</span>');
      }
    }
    arr2.push('</p>');
  }
  document.getElementById("text").innerHTML = arr2.join('');

  var words = [...document.getElementsByClassName("word")];
  words.forEach(function(word) {
    word.onclick = function() {
      if (word.className == "clicked") {
        word.className = 'notclicked';
      }
      if (word.className == "onmouse") {
        word.className = 'clicked';
      }
    }
    word.onmouseover = function onMouse() {
      if (word.className != "clicked") {
        word.className = 'onmouse';
      }
    }
    word.onmouseout = function onMouse() {
      if (word.className != "clicked") {
        word.className = 'notclicked';
      }
    }
  });

我不知道如何做到这一点，因为要显示的文本是一个变量。我该怎么做？

Answer 1

如何使用Twitter Bootstraps tooltip。添加jQuery，bootstraps JS和CSS;一旦添加了所有这些，您将需要编辑行

arr2.push(' <span class="notclicked word ' + i + '">' + arr[i][0] + '</span>');

类似

arr2.push(' <span class="notclicked word ' + i + '" data-toggle='tooltip' data-placement='top' title='YOUR_TRANSLATION_HERE'>' + arr[i][0] + '</span>');

编辑2 - 更新链接：

Here is a working example

编辑3

我还会在顶部和底部添加一些边距，这样您就不会因为没有空间而从工具提示中获得意外行为。

显示数组onclick的元素

1 个答案: