Question

我有一个Ajax调用，它获得了不同的描述以及视频的网址：

function TraerInstructivos() {
    $.ajax({
        type: "GET",
        url: '<%= Page.ResolveUrl("~/Instructivo/Instructivos.aspx") %>' + '/TraerInstructivos',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var res = JSON.parse(response.d);
            $.each(res, function (i, item) {
                DibujarVideo(item);
            });
        },
        error: function (response) {
            alert("Error");
        }
    });
};

现在DibujarVideo是一种方法，它将获取我在ascx中拥有的模板，进行复制，然后附加它。这是ascx的HTML：

<div id="Videos">

</div>

<template id="video-elem">
    <div class="row">
        <div class="col-lg-4">
            <font id="video-desc" size="3"></font>
            <br />
            <br />
            <p><a id="video-ref" class="btn btn-secondary" href="#" role="button">Mira el Video &raquo;</a></p>
        </div>
    </div>
    <br />
    <hr />
</template>

现在，复制模板html的方法如下：

function DibujarVideo(video) {
    var elemACrear = $("#video-elem").html();

    $(elemACrear).find("#video-ref").attr("href", video.DireccionVideo);

    console.log(elemACrear);

    $("#Videos").append(elemACrear);

}

我在控制台日志中看到的页面是，href的值没有更改，但是如果将其保存在变量中，则会看到更改，例如：

var elem = $(elemACrear).find("#video-ref").attr("href", video.DireccionVideo);

所以我认为在页面和变量中更改/操作DOM树并不相同。

如何在 elemACrear 变量中更改该href？

我正在学习jQuery，感谢所有帮助。

Answer 1

您已经诊断并解决了问题，而没有遵循逻辑。您只需要将在elem变量中创建的jQuery对象提供给append()调用，就像这样：

function DibujarVideo(video) {
  var elemACrear = $("#video-elem").html();
  var $elem = $(elemACrear);
  $elem.find("#video-ref").attr("href", video.DireccionVideo);
  $("#Videos").append($elem);
}

如何在变量内修改模板html的值

1 个答案: