时间戳

首页 > 解决方案 > 如何仅在 javascript 函数内运行代码？

javascript - 如何仅在 javascript 函数内运行代码？

问题描述

我正在尝试使用ajax 发送innerhtml。发送前必须删除某些属性。当我单击按钮时，我删除了属性并发送...，一切正常，但我的属性也在 html 中被删除。

它们只能在函数内删除并发送，而不应在 html 中删除！如何避免。

代码：

<div id="container" class="container" >

    <div id="parent1" class="parent">
         <div id="child1" class="child" ondrop="drop(event);" ondragover="allowDrop(event);" >same content</div>
    </div>

    <div id="parent2" class="parent">
         <div id="child2" class="child" ondrop="drop(event);" ondragover="allowDrop(event);" >same content</div>
    </div>

    <div id="parent3" class="parent">
         <div id="child3" class="child" ondrop="drop(event);" ondragover="allowDrop(event);" >same content</div>
    </div>

</div>
<button onclick="myFunction()">Click me</button>

function myFunction() {
  var divsclass = Array.prototype.slice.call(document.getElementsByClassName("parent"));

  var parenthtml = "";
  divsclass.forEach(function(div){
    Array.from(document.querySelectorAll(".parent [ondrop]")).forEach((elem) => elem.removeAttribute("ondrop"));
    Array.from(document.querySelectorAll(".parent [ondragover]")).forEach((elem) => elem.removeAttribute("ondragover"));
    var parenthtmlsend = div.innerHTML;
    parenthtml += "&PARENTHTML"+ n++ +"=" + parenthtmlsend;
  });

    var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

            }
        };
        xmlhttp.open("GET", "same-page.php? "+ encodeURI(results) + parenthtml, true);
        xmlhttp.send();

}

我尝试将代码复制到另一个 div，然后删除属性，但即使这样，html 代码中的属性也被删除了。

    var containercopy = document.getElementById("container").innerHTML;
    document.getElementById("container-copy").innerHTML = containercopy;

我的代码很大，所以我重写并举了一个简短的例子，也许在这个过程中我犯了一个错误......

标签： javascriptajaxfunctionattributes

解决方案

我不确定这是不是好方法，但是您可以在数组中深入克隆您的元素，然后对其进行更改。

看代码

function myFunction() {
  var divsclass = Array.prototype.slice.call(document.getElementsByClassName("parent")); 
   
  var parenthtml = "";
  
  divsclass.forEach(function(div){
    
    // clone
    var clonedDiv = div.cloneNode(true);;
    
    Array.from(clonedDiv.querySelectorAll(".parent [ondrop]")).forEach((elem) =>                              elem.removeAttribute("ondrop"));
    Array.from(clonedDiv.querySelectorAll(".parent [ondragover]")).forEach((elem) =>                          elem.removeAttribute("ondragover"));
    var parenthtmlsend = clonedDiv.innerHTML;
    parenthtml += "&PARENTHTML"+ n++ +"=" + parenthtmlsend;
  });

    var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

            }
        };
        xmlhttp.open("GET", "same-page.php? "+ encodeURI(results) + parenthtml, true);
        xmlhttp.send();

}

在您的代码中似乎n未定义，但我没有更改它

推荐阅读