在html中显示javascript数组中的图像

我想使用javascript在一个div中显示文本和图像的html代码组合。图像存储在一个数组中，显示哪些图像将取决于if/else语句中的变量handValue

我认为我的语法/连接不正确，但不能完全理解

我声明的数组如下：

//Array for card images. 
       var startHand = ['images/cards/cardResult1',
                        'images/cards/cardResult2',
                        'images/cards/cardResult3',
                        'images/cards/cardResult4',
                        'images/cards/cardResult5',
                        'images/cards/cardResult6',
                        'images/cards/cardResult7',
                        'images/cards/cardResult8']
                                                ;

//Array for card tooltips. Each tooltip matches with a card category. 
       var toolTips = ['Category 1: AA, AKs, KK, QQ, JJ',
                       'Category 2: AK, AQs, AJs, KQs, TT',
                       'Category 3: AQ, ATs, KJs, QJs, JTs, 99',
                       'Category 4: AJ, KQ, KTs, QTs, J9s, T9s, 98s, 88',
                       'Category 5: A9s - A2s, KJ, QJ, JT, Q9s, T8s, 97s, 87s, 77, 76s',
                       'Category 6: AT, KT, QT, K9s, J8s, 86s, 75s, 65s, 66, 55, 54s',
                       'Category 7: K8s - K2s, Q8s, T7s, J9, T9, 98, 64s, 53s, 44, 43s, 33, 22',
                       'Category 8: A9, K9, Q9, J8, J7s, T8, 96s, 87, 85s, 76, 74s, 65, 54, 42s, 32s'];

我的职责如下。我假设for循环也会整理我的代码，总共有8个类别。因此，在这方面的任何帮助都将不胜感激

if (handValue >= 0.9) {
     return document.getElementById("resultText").innerHTML = "You can play any two cards from this position.";
                                }

     else {
            return document.getElementById("resultText").innerHTML = 'You should play if your cards are in one of the following categories:<br><br><table>';


    //Category 1
            if (handValue < 0.06) {
             return document.getElementById("resultText").innerHTML = 
                '<tr><td class="tooltip"><img src="' + startHand[0] + '.jpg"><span class="tooltiptext">' + toolTips[0] + '</span></td>';
                                            }                  

    //Category 2
                 else if (handValue < 0.20) {
             return document.getElementById("resultText").innerHTML = 
                '<tr><td class="tooltip"><img src="' + startHand[0] + '.jpg"><span class="tooltiptext">' + toolTips[0] + '</span></td><td class="tooltip">' + startHand[1] + '.jpg"><span class="tooltiptext">' + toolTips[1] + '</span></td>';
                                            }

    //Category 3
                 else if (handValue < 0.40) {
               return document.getElementById("resultText").innerHTML = 
          '<tr><td class="tooltip"><img src="' + startHand[0] + '.jpg"><span class="tooltiptext">' + toolTips[0] + '</span></td><td class="tooltip">' + startHand[1] + '.jpg"><span class="tooltiptext">' + toolTips[1] + '</span></td><td class="tooltip">' + startHand[2] + '.jpg"><span class="tooltiptext">' + toolTips[2] + '</span></td>';}

---

试试这个瀑布逻辑。在您的示例中，在else语句中立即返回。第1类、第2类、第3类，如果从未达到语句

function generateMarkup(handValue) {
    if (handValue >= 0.9) {
        return document.getElementById("resultText").innerHTML = "You can play any two cards from this position.";
    }

    if (handValue < 0.06) {
        return document.getElementById("resultText").innerHTML = '<tr><td class="tooltip"><img src="' + startHand[0] + '.jpg"><span class="tooltiptext">' + toolTips[0] + '</span></td>';   
    }

    if (handValue < 0.20) {
        return document.getElementById("resultText").innerHTML = '<tr><td class="tooltip"><img src="' + startHand[0] + '.jpg"><span class="tooltiptext">' + toolTips[0] + '</span></td><td class="tooltip">' + startHand[1] + '.jpg"><span class="tooltiptext">' + toolTips[1] + '</span></td>';
    }

    if (handValue < 0.40) {
        return document.getElementById("resultText").innerHTML = '<tr><td class="tooltip"><img src="' + startHand[0] + '.jpg"><span class="tooltiptext">' + toolTips[0] + '</span></td><td class="tooltip">' + startHand[1] + '.jpg"><span class="tooltiptext">' + toolTips[1] + '</span></td><td class="tooltip">' + startHand[2] + '.jpg"><span class="tooltiptext">' + toolTips[2] + '</span></td>';
    }

    return document.getElementById("resultText").innerHTML = 'You should play if your cards are in one of the following categories:<br><br><table>';
}

---

为了补充第一个答案，您可以进行以下改进

1.对字符串数组使用双引号根据W3的说法，这是一种更好的方法

 var startHand = ["images/cards/cardResult1",
                     "images/cards/cardResult2"];

2如果不使用返回值，则将其取下

    function generateMarkup(handValue) {
        if (handValue >= 0.9) {
           document.getElementById("resultText").innerHTML = "You can play any two cards from this position.";

     }

//More lines of code
//...
//...

  }  

3看看像JQuery这样的库，它会让事情变得更简单

    function generateMarkup(handValue) {
            if (handValue >= 0.9) {
              $("#resultText").html("You can play any two cards from this position.");

        } 

    //More lines of code
    //...
    //...

   }

---

你有错误吗？执行此代码时是否存在实际问题？初始的if/else语句运行良好，但嵌套的if Category 1以后的语句不会显示它应该从数组中提取的图像。因此，在else语句中使用return，一旦它执行完函数，这是正确的！在函数中使用return将立即结束所述函数的执行，并返回返回值。感谢mate-这确实有帮助。在提供的答案中，返回是绝对重要的，它结束了逻辑树的执行。在我看来，jQuery是一个可怕的库。它又肿又慢。如果您是一名开发人员，学习javascript的基础知识将对您大有帮助。如果您了解javascript的核心，您将能够通过api文档学习任何框架或库。学习jQuery不会帮助您理解react、angular或nodejs等内容。@KyleRichardson关于return语句如果是这种情况，则有必要放置一个return；在函数末尾，我的建议不是作为初学者的学习选项，而是作为减少他必须编写的代码量的选项。此外，随着时间的推移，由于它是开源的，所以该库的缺陷正在被解决。不，您可以有多个return语句。我给出的代码无需修改即可完美运行。阅读这里：我没有说过你的代码不工作！我并没有说返回语句是不必要的。我的建议仅适用于未使用返回值的情况。最好加上一个单一的回报；在函数的末尾，如果它的唯一用途是确保终止，请看我给出的示例，函数的最后一行是返回。我听不懂你在说什么。