javascript - 使用 document.currentScript 将数据附加到 div

Question

我想通过将数据的 id 作为 script 标记中的属性将数据附加到 div 中。在此示例中，first-div 应该附加“test1”，second-div 应该附加“test2”。

但是，结果是“test1”和“test2”都附加到 second-div。 first-div 是空的。我猜这与 document.currentScript 的运作方式有关。有什么方法可以得到我想要的结果吗？

<div id="first-div"></div>
<div id="second-div"></div>

<script attr1="name1" attr2="name2" to-div="first-div" type="text/javascript">
  var this_script = document.currentScript;
  var attr1 = this_script.getAttribute('attr1');
  var attr2 = this_script.getAttribute('attr2');
  var append_div = this_script.getAttribute('to-div');

  $.ajax({
    url: "/dir?attr1=" + attr1,
    type: 'GET',
    success: function(data) {
      $('#' + append_div).append("test1");
  });
</script>

<script attr1="name3" attr2="name4" to-div="second-div" type="text/javascript">
  var this_script = document.currentScript;
  var attr1 = this_script.getAttribute('attr1');
  var attr2 = this_script.getAttribute('attr2');
  var append_div = this_script.getAttribute('to-div');

  $.ajax({
    url: "/dir?attr1=" + attr1,
    type: 'GET',
    success: function(data) {
      $('#' + append_div).append("test2");
  });
</script>

此外，在解决方案中，脚本不能有 id 属性，这就是我尝试使用 document.currentScript 的原因。

这样做的原因是代码将托管在我的服务器上。给定通过脚本标签上的属性传递的参数，代码会将信息附加到用户想要的 div 中。最后，用户应该能够使用:

<script attr1="var1" attr2="var2" to-div="custom-div" src="http://www.myurl.com/assets/script.js" type="text/javascript"></script>

要根据我在服务器上运行的代码将数据插入到他们的 custom-div 中，这取决于他们提供的参数 attr1 和 attr2。

Answer 1

你的问题是 var append_div 是一个全局变量，每次遇到新的脚本标签时，它都会被新值覆盖。

由于 ajax 是异步的，当响应返回时，其他脚本标签将被评估，因此 append_div 将具有最后一个脚本标签的值。

您可以通过创建一个包装 ajax 的函数来解决这个问题

function doAjax(elementId, attr1) {
    $.ajax({
        url: "/dir?attr1=" + attr1,
        type: 'GET',
        success: function (data) {
            $('#' + elementId).append("test2");
        }
    });
}

doAjax(append_div, attr1); 

@Rhumborl 指出的更好的解决方案是使用 IIFE

(function( elementId, attr1){
    $.ajax({
        url: "/dir?attr1=" + attr1,
        type: 'GET',
        success: function (data) {
            $('#' + elementId).append("test2");
        }
    });
}(elementId, attr1);

或者将所有代码包装在一个 IIFE 中，并且不需要传入任何参数。

(function(){
      var this_script = document.currentScript;
      var attr1 = this_script.getAttribute('attr1');
      var attr2 = this_script.getAttribute('attr2');
      var append_div = this_script.getAttribute('to-div');

      $.ajax({
        url: "/dir?attr1=" + attr1,
        type: 'GET',
        success: function(data) {
          $('#' + append_div).append("test2");
        }
      });
}();