Question

我有以下问题。我只限于javascript和jQuery。我的文件结构如下所示：

index.html
assets/ -> templates/ -> template.html

我想从template.html获取html，以便在操作后在index.html中使用div。

示例模板：

<h2 class="question-text js-question-text"> I have a question for you! </h2>
<button class="answer-button js-answer-button" data-button-number="1"></button>
<button class="answer-button js-answer-button" data-button-number="2"></button>
<button class="answer-button js-answer-button" data-button-number="3"></button>
<button class="answer-button js-answer-button" data-button-number="4"></button>

我想将该模板存储为变量中的html，并且能够在将其放置到DOM之前操纵内部（更改问题，更改按钮/答案文本等）。

我一直在使用.load（）并在之后添加更改但这需要绘制两次，这是不理想的。

此外，我尝试过.get（），但不能让它像我脑子里的那样简单地工作。

这甚至可能吗？

谢谢！

Answer 1

我在工作中一直这样做： - ）

使用ajax收集文件内容和成功函数来执行操作。最后它看起来像这样：

$(document).ready(function(){
  let getView = function(view){

    let html;

    $.ajax({
      url: 'assets/templates/'+view+'.html',
      async: false,
      success: function( data ){
        html = $.parseHTML( data.response );
      }
    });

    return html;

  }
});

变量html现在将包含ajax查询的解析结果。你可能需要调整它以确保其工作，但这是一般结构。真正重要的是async：false。这使您的脚本等待，直到您得到响应继续前进。否则您的返回值将为空白。希望有所帮助！

修改

要编辑元素并设置您需要的值（例如页面标题），您可以使用.find()函数.text()，如下所示：

$(document).ready(function(){ let getView = function(view){ let html; $.ajax({ url: 'assets/templates/'+view+'.html', async: false, success: function( data ){ html = $.parseHTML( data.response ); } }); $(html).find('.page-title-selector').text('Your new title!'); return html; } });

从本地html文件复制html并将其放在变量中进行操作，然后再附加到DOM？

1 个答案: