Question

我想使用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>';}

Answer 1

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

local function union ( a, b )
    local result = {}
    for k,v in pairs ( a ) do
        table.insert( result, v )
    end
    for k,v in pairs ( b ) do
         table.insert( result, v )
    end
    return result
end

Answer 2

只需添加第一个答案，您就可以进行以下改进。

1）根据w3schools，使用双引号作为字符串数组的更好方法

 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
    //...
    //...

   }

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

2 个答案: