仅显示 3 张图像中的 1 张图像，功能使用？答案

【问题标题】：Display only 1 image out of 3 images, function use?仅显示 3 张图像中的 1 张图像，功能使用？
【发布时间】：2018-02-15 05:36:34
【问题描述】：

使用生成表格的函数 showResults () 有困难。我想根据键：值数据在“HasPDF”、“HasMobile”或“应用”之间是否为 1 从 3 个图像中选择显示 1 个图像。所以我尝试使用 if-then-else 语句来筛选 3 种可能性。有什么建议吗？谢谢你。绕来绕去..

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table {
    margin: 3px;
}
table th {
    font-weight: bold;
    cursor: pointer;
}
table th, table td {
    padding: 3px;
    border: 1px solid #000;
}

</style>
<script>

var arr = [

    {
      "Inn_ID": "2292522",
      "Event_Name": "Jaguars ",
      "Event_Date": "2017-11-19 00:00:00",
      "ticket_total": "76.0",
      "HasPDF": "1",
      "HasMobile": "0",
      "apponly": "0"
    },
    {
      "Inn_ID": "2292523",
      "Event_Name": "Pelicans",
      "Event_Date": "2018-01-16 00:00:00",
      "ticket_total": "50.0",
      "HasPDF": "0",
      "HasMobile": "1",
      "apponly": "0"
    },
    {
      "Inn_ID": "2292524",
      "Event_Name": "Owls",
      "Event_Date": "2018-01-16 00:00:00",
      "ticket_total": "60.0",
      "HasPDF": "0",
      "HasMobile": "0",
      "apponly": "1"
    }

];

$(function() {
    $('#headings th').click(function() {
        var id = $(this).attr('id');
        var asc = (!$(this).attr('asc')); // switch the order, true if not set

        // set asc="asc" when sorted in ascending order
        $('#headings th').each(function() {
            $(this).removeAttr('asc');
        });
        if (asc) $(this).attr('asc', 'asc');

        sortResults(id, asc);
    });

    showResults();
});

function sortResults(prop, asc) {
    arr = arr.sort(function(a, b) {
        if (asc) return (a[prop] > b[prop]);
        else return (b[prop] > a[prop]);
    });
    showResults();
}

function image(thisImg) {
    var img = document.createElement("IMG");
    img.src = thisImg;
    document.getElementById('imageDiv').appendChild(img);
}

function showResults () {
    var html = '';
    for (var e in arr) {
        html += '<tr>'
            +'<td>'+arr[e].Event_Date+'</td>'
            +'<td><a href="https://www.thexx.com/orders/view-invoice/'+arr[e].Inn_ID+'" target="_blank">'+arr[e].Inn_ID+' </a></td>'
            +'<td>'+arr[e].ticket_total+'</td>'
            +'<td>'+if (arr[e].HasPDF == "1") {
                       image('pdf.png');
                        } else if (arr[e].HasMobile == "1"){
                        image('mobile.jpeg');
                        } else {image('link.png');} 
                        +'<div id="imageDiv" style="width=20"></div></td>'
        +'</tr>';
    }
    $('#results').html(html);
}

</script>

</head>

<body>

Click on the table headings to sort the results.
<table>
    <thead id="headings">
        <tr>
            <th id="Event_Date">Event Date</th>
            <th id="Inn_ID">Inn ID</th>
            <th id="ticket_total">Amount</th>
            <th id="order">Order Type</th>

        </tr>
    </thead>
    <tbody id="results">
        <!-- this will be auto-populated -->
    </tbody>
</table>



</body>

</html>

【问题讨论】：

标签： javascript arrays json html

【解决方案1】：

我已经重写了你的函数，因为有一些警告可能会导致你的代码崩溃。我稍后会解释它们，但首先是代码：

function showResults(arr) {
  var html = '';

  for (var i = 0; i < arr.length; i++) {
    var image = arr[i].hasPDF ? 'pdf.png' : (arr[i].hasMobile ? 'mobile.jpeg' : 'link.png');

    html += '<tr>';
    html +=   '<td>' + arr[i].Event_Date + '</td>';
    html +=   '<td>';
    html +=     '<a href="https://www.aceticket.com/orders/view-invoice/' + arr[i].Invoice_ID + '" target="_blank">';
    html +=       arr[i].Invoice_ID;
    html +=     '</a>';
    html *=   '</td>';
    html +=   '<td>';
    html +=     arr[i].ticket_total;
    html +=   '</td>';
    html +=   '<td>';
    html +=     '<div id="imageDiv" style="width=20">';
    html +=       '<img src="' + image + '" />';
    html +=     '</div>';
    html +=   '</td>';
    html += '</tr>';

  }

  $('#results').html(html);
}

我做的第一件事是构建HTML 以获得更好的可读性，就像您使用普通的HTML 一样。幸运的是 JavaScript 非常“对空白空间友好”，这使得这成为可能。

我做的第二件事是放弃image() function。这个function 将document 方法与HTML 字符串创建混合在一起。这就是您的代码未按预期运行的原因。

这是（被认为是）一种竞争条件。让我这样解释：

您创建了一个包含HTMLmarkup 的字符串。
在创建它的过程中，您尝试将图像标签从image() 函数附加到div（同样，这个div 只存在于字符串中，即使在调用image() 函数之后也是如此。 )
使用来自jQuery 的html() 函数，您最终可以根据您在字符串中创建的标记创建DOM。

您的方法并非完全错误，但也有一些缺点。在第三步之后，您可以访问 DOM 到 append() 的东西。

image() 函数的替代方法是简单地在您的字符串中创建一个img 标记，并传递一个包含图像文件名的变量。我使用嵌套的ternary operator 这样做以节省一些空间。

我希望您喜欢我对您问题的解决方案，如果我可以提供任何帮助，请发表评论！ ;)

【讨论】：

好的——谢谢。我会尝试把它放在主代码中。
是的 - 我喜欢三元运算符。我本来打算使用那个三元运算符，但是却迷失在了 - 好吧，它就在那里。
另外，由于数组在
不，您不需要传递它，但这样做更安全，尤其是当您的脚本中包含更多内容时。

【解决方案2】：

使用此搜索和图像功能这是运行示例 https://plnkr.co/edit/3Sx3wnzFDFj4wKrv06qS?p=preview

function showResults () {
    var html = '';
    for(var e =0; e< arr.length; e++)
      {
        var x=""

        html += '<tr>'
            +'<td>'+arr[e].Event_Date+'</td>'
            +'<td><a href="https://www.aceticket.com/orders/view-invoice/'+arr[e].Invoice_ID+'" target="_blank">'+arr[e].Invoice_ID+' </a></td>'
            +'<td>'+arr[e].ticket_total+'</td>'
            +'<td><div id="imageDiv'+e +'" style="width=20"></div></td>'
        +'</tr>';
    }
    $('#results').html(html);
     for(var e =0; e< arr.length; e++)
     {
        if(arr[e].HasPDF == "1")
        {
          x='pdf.png';
         } 
         else if (arr[e].HasMobile == "1")
         {
                       x='mobile.jpeg';
        } 
        else
        {
          x='link.png';

        } 
         image(x ,e);
     }
}

function image(thisImg,e) {
    var img = document.createElement("IMG");
    img.src = thisImg;
    document.getElementById('imageDiv'+e).appendChild(img);
}

【讨论】：

也许你应该解释一下他的代码出了什么问题。他不会从复制/粘贴中学到东西。
当然，谢谢。你已经解释了这件事，这将对他有很大帮助

【解决方案3】：

您的图像函数不返回任何内容，并且您正在附加到 DOM 上当前不存在的 div (#imageDiv)。您还将相同的 id (#imageDiv) 分配给多个 div。

你想试试这个：

 function image(thisImg) {
    var img = document.createElement("IMG");
    img.src = thisImg;
    return img;
}

和

 function showResults () {
   var html = '';
   for (var e in arr) {
    html += '<tr>'
        +'<td>'+arr[e].Event_Date+'</td>'
        +'<td><a href="https://www.aceticket.com/orders/view-invoice/'+arr[e].Invoice_ID+'" target="_blank">'+arr[e].Invoice_ID+' </a></td>'
        +'<td>'+arr[e].ticket_total+'</td>'
        +'<td>'+if (arr[e].HasPDF == "1") {
                   '<div id="imageDiv" style="width=20">'+ image('pdf.png');+'</div></td>'
                  } else if (arr[e].HasMobile == "1"){
                   '<div id="imageDiv" style="width=20">'+ image('mobile.jpeg');+'</div></td>'
                  } else {
                    '<div id="imageDiv" style="width=20">'+ image('mobile.jpeg');+'</div></td>'
                  } 
        +'</tr>';
       }
       $('#results').html(html);
  }

【讨论】：

true 它没有返回任何东西，但是为什么还要存在一个函数来创建该图像标签呢？根本不需要。
我认为在已经很混乱的 showResults 函数之外拥有该函数是一件很棒的事情。它使代码更具可读性。 codereadability.com/are-one-line-functions-a-good-idea
但是函数本身完全没用......他可以用更少的代码得到他想要的结果，这也使代码更具可读性！ ;)
我喜欢我的版本，因为我使用的代码更少，但我在最后一列中迷路了。谢谢你的解释