javascript - 编辑放置匿名函数的 HTML

Question

我想更改该脚本所在位置的 HTML 内容:

<script type="text/javascript">
    (function () {
        $.ajax({
            url: "/api/request/something",
            data: {
                // ...
            },
            success: function (data) {
                // ...
                var html = "...";
                $(this).parent().html(html);
                }
            }
        })
    })();
</script>

我将此脚本放入现有的 div 元素中，但该脚本的执行不会更改该 div 元素的 HTML。

Answer 1

使用将设置为 document.currentScript.parentNode 的参数来代替 this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <script>
    (function (elem) {
        $.ajax({
            url: "https://jsonplaceholder.typicode.com/posts/1",
            data: {
                // ...
            },
            success: function (data) {
                // ...
                var html = "display this";
                $(elem).html(html);
            }
        })
    })(document.currentScript.parentNode); // pass this value
    </script>
</div>

请注意，这不是通常的做法。考虑为您的元素提供一些 id 或 class 并在位于文档末尾的脚本中引用它:

$.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    data: {
        // ...
    },
    success: function (data) {
        // ...
        var html = "display this";
        $("#target").html(html);
    }
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>