异步加载后，如何将类添加到元素中

How can I add class to an element after it has loaded asynchronously?

本文关键字：添加 元素 加载 异步      更新时间：2023-10-23

我的问题是，当AJAX加载元素并在成功回调期间将其附加到DOM中时，addClass方法执行得太快，并且不会显示转换。

$.ajax({
    url : contentURL,
    type : "GET",
    dataType : "html",
    success : function(response){
        $content.append(response);
        $activeSection = $('#'+href);   // appended element
        $activeSection.addClass("open"); // class is added before appending
    }
});

没有ajax的问题：演示

您应该尝试同步ajax调用即async：错误

有关详细信息，请参阅以下链接http://api.jquery.com/jquery.ajax/

也许你需要使用一些类似的：

  setInterval(function(){
    if($('#elementId').html() != null) {
      $('#elementId').addClass('.class');
      return;
    }
    console.log('Working...');
    }, 1000);

这是在元素存在并且类已被删除的情况下运行的。（抱歉英语不好）

操作DOM确实是资源密集型的。当一个新元素正在构建时，它被赋予了class属性。我的解决方案是在操作DOM之前准备一个包装器元素，并仅在包装器上修改class属性。在创建新元素之后，我插入了一个新的空包装器，用于进一步的内容加载。

我的解决方案

function addClass(el, classN) {
  var hasClass = el.className.search(classN)+1;
  if (hasClass) {
      return true
  } else {
      el.className += el.className ? " "+classN : classN;
  }
}
function removeClass(el, classN) {
  var re = new RegExp("''s*"+classN, "ig");
    el.className = el.className.replace(re, "");
    if (el.className.length === 0) {
        el.removeAttribute("class");
    }
}
function dropping (el, classN, duration){
    addClass(el, classN);
  setTimeout(function(){
    el.parentNode.removeChild(el);
    state2 = null;
  }, duration);
}
function opening(e) {
    if (!open) {
    open = true;
    addClass(w1, "open");
    addClass(w2, "open");
    addClass(state0, "open");
    state1 = state0;
    state0 = conClear.cloneNode(true);
    w3.appendChild(state0);
  }
}
function closing(e) {
    if (open) {
    open = false;
    removeClass(w1, "open");
    removeClass(w2, "open");
    dropping(state1, "drop", 1000);
    state2 = state1;
    state1 = null;
  }
}
function paging(e){
    if (open) {
    dropping(state1, "drop", 1000);
    state2 = state1;
    addClass(state0, "open");
    state1 = state0;
    state0 = conClear.cloneNode(true);
    w3.appendChild(state0);
  }
}
var open = false;
var bO = document.getElementById("open");
var bC = document.getElementById("close");
var bP = document.getElementById("page");
var w1 = document.getElementById("wrapper1");
var w2 = document.getElementById("wrapper2");
var w3 = document.getElementById("wrapper3");
var con = w3.getElementsByClassName("content").item(0);
var state0 = con;
var state1 = null;
var state2 = null;
var conClear = con.cloneNode(true);
bO.addEventListener("click", opening, false);
bC.addEventListener("click", closing, false);
bP.addEventListener("click", paging, false);
相关文章：