Question

生成表的函数showResults（）有困难。我想从3个图像中选择显示1个图像，具体取决于键：值数据在“HasPDF”，“HasMobile”或“apponly”之间是否为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>

Answer 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对白色空间非常友好＆＃34;这使得这成为可能。

我做的第二件事就是放弃了image() function。此function混合document方法与HTML字符串创建。这就是您的代码没有按预期运行的原因。

这是一种竞争条件。让我解释一下：

您创建一个包含HTML标记的字符串。
在创建它的过程中，您尝试将image()函数中的图片标记附加到div（此div仅存在于字符串内部，甚至在image()之后{1}}函数被调用。）
使用html()中的jQuery函数，您最终会在字符串中创建的标记中创建DOM。

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

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

我希望您喜欢我的问题解决方案，如果我有任何帮助，请发表评论！ ;）

Answer 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);
}

Answer 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);
  }

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

3 个答案: