Question

我正在使用jQuery ajax来获取JSON数据。

以下是我的代码示例。 This是我的傻瓜。

现在很多人告诉我，制作动态字符串并不好。

有人可以给我一个更好的方法来创建div吗？

$.ajax({
  url: 'https://api.myjson.com/bins/1mkxw',
  method: "GET",
  headers: { "Accept": "application/json; odata=verbose" },
  async: false,
  success: function (data) {
    let html;
    $.each(data.results, function (i, item) {
      html += '<div class="tileBlock"><img src="/PublishingImages/' + item.Title + '" alt="' + item.To.Title + '" /><br>';
      html += '<div class="blockCol1 greyLabel">' + item.To.Title + '</div><div class="blockCol2 fareTxt">' + item.Cost + '&nbsp;' + item.From.Currency + '</div><div style="clear: both;"></div>';
      html += '<div class=" blockCol3 smallTxt">' + item.Class + '&nbsp;|&nbsp;' + item.Trip + '</div><br><div style="clear: both;"></div>';
      html += '<div class="btnHolder"><input name="button" class="btn-finder" type="button" data-item="' + encodeURIComponent(JSON.stringify(item)) + '" class="searchBtn wth150" href="#" value="Book now" /></div></div>';
    });
    $("#dvPromotion").empty();
    $("#dvPromotion").html(html);
  }
});

// Attach an event listener to the document element (or any other parent element of your buttons)
$(document).on('click', '.btn-finder', function() {
  console.dir(JSON.parse(decodeURIComponent($(this).data('item'))));
});

Answer 1

您可以使用jQuery创建div（或任何DOM对象）对象并为其指定属性。举个例子：

// Create an image tag with appropriate properties
var img = jQuery('<img/>', {
    src: '/PublishingImages/'
});

// Create a div tag with appropriate properties
var div = jQuery('<div/>', {
    class: 'tileBlock'
});

// Append the image tag in the div
div.append(img);

这种方式比您实现的字符串连接更好（因为它提高了可读性）。

但是，如果您正在寻找长期解决方案和更好的架构，我建议您使用模板引擎（例如Mustache.js）。

Answer 2

在大型项目中尝试在本机JavaScript中进行模板化的最佳方法之一。对于POC来说，这是一个非常小的部分。

function(cellValue, options, rowObject) {
                        var markup = "<a title=\"%ToolTip%\" href=%Href%;>%Text%</a>";
                        var replacements = {
                            "%Text%": rowObject.EmployeeName,
                            "%ToolTip%": Employee.messages && Employee.messages.ClickHereToEdit
                                ? Employee.messages.ClickHereToEdit : "",
                            "%Href%": "javascript:Employee.openAddEditModal(&apos;" + rowObject.EmployeeId + "&apos;)"
                        };
                        markup = markup.replace(/%\w+%/g, function(all) {
                            return replacements[all];
                        });
                        return markup;
                    }

Answer 3

我通常，为了这种工作，在我的html中创建一个隐藏的模板，然后使用它。

然后对于我需要放在我的html中的每个项目，我克隆模板并插入我想要的地方。

我告诉你我将如何做到这一点。

修改您也可以在插入每个项目时绑定点击。

查看与html.find('.btn-finder')
相关联的.click

var $template = $(".tileBlockTemplate"); $.ajax({ url: 'https://api.myjson.com/bins/1mkxw', method: "GET", headers: { "Accept": "application/json; odata=verbose" }, async: false, success: function(data) { $("#dvPromotion").empty(); $.each(data.results, function(i, item) { var html = $template.clone(); html.removeClass('tileBlockTemplate'); html.find('.tileImage').attr('src', '/PublishingImages/' + item.Title) .attr('alt', item.To.Title); html.find('.greyLabel').html(item.To.Title); html.find('.fareTxt').html(item.Cost + ' ' + item.From.Currency); html.find('.smallTxt').html(item.Class + ' | ' + item.Trip); html.find('.btn-finder').data('item', encodeURIComponent(JSON.stringify(item))) .click(function() { console.dir(JSON.parse(decodeURIComponent($(this).data('item')))); }); $("#dvPromotion").append(html); }); } });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dvPromotion"> </div> <div style='display:none'> <div class="tileBlockTemplate tileBlock"> <img class="tileImage" src="/PublishingImages/abuDhabi.jpg" alt="Abu Dhabi"> <br> <div class="blockCol1 greyLabel">Abu Dhabi</div> <div class="blockCol2 fareTxt">60 KWD</div> <div style="clear: both;"></div> <div class=" blockCol3 smallTxt">economy | RT</div> <br> <div style="clear: both;"></div> <div class="btnHolder"> <input name="button" class="btn-finder" type="button" data-item="" href="#" value="Book now"> </div> </div> </div>

使用jQuery创建动态div

3 个答案: