jquery addclass 在 setinterval 内不断重置答案

【问题标题】：jquery addclass keeps reseting inside setintervaljquery addclass 在 setinterval 内不断重置
【发布时间】：2020-11-16 10:15:41
【问题描述】：

我有一个 HTML DIV，它由 ajax 函数使用 setinterval 更新。我想要做的是将类添加到 ajax 的结果中。但是当 setinterval 被添加的类被重置并显示初始类。如何解决这个问题。

<html>
<body>
<div id="something"></div>

<script>
$(document).ready(function(){
var id;
setInterval(function(){
somepage();
  addactiveclass();
 }, 5000);

function somepage(){
$.ajax({
  url:"fetchcontents.php",
  method:"POST",
  success:function(data){
  $('#something').html(data);
  }
 })
}
function addactiveclass(){
$('#list-'+id).addClass("active");
}
// UPDATED
$(document).on('click', '.mycontents', function(){
id = $(this).data('id');
$('#list-'+id).addClass("active");
}

});
</script>
</body>
</html>

更新： fetchcontents.php

<?php
     $output .= '<div class="list-item mycontents" data-id="'.$row['id'].'" data-name="'.$row['username'].'" id="list-'.$row['id'].'">';
//.... some php function to generate some contents inside the above div.....
// Contents do not interfere with this question.
$output .= '</div>';

echo $output;
?>

发生的情况是活动类未添加到 div id="list-'.$row['id'].'"。如您所知，setinterval 会在 5 秒后继续执行 ajax 函数，并且活动类被重置并且不显示。

谁能指导我完成这个问题。

提前致谢。

【问题讨论】：

$.ajax 中没有传递任何参数。那么我们如何理解ajaxsuccess 是什么？更新您的问题。
嗨@KrupalPanchal，我已经更新了我上面的问题。我的问题是 setinterval 不断将类重置为初始值。

标签： php html jquery ajax setinterval

【解决方案1】：

我刚刚在 jsfiddle 中运行了你的代码，但是用一个将新 div 定义为 #something 内容的字符串替换了 ajax，它可以工作。

但它确实需要我将 js 放入 $(document).ready 块中

$(document).ready(function() {
    //your js in here
})

试试看。在呈现所有 HTML 之前，它不会定义 js。我的猜测是您在 #something 存在之前就引用了它。

编辑：==============================================

自从我写完答案后，你已经大大改变了你的代码，但是为了支持我声称有一个我认为是你的问题的解决方案，我重新完成了我的 jsfiddle 测试：https://jsfiddle.net/uf5h0sgw/

<html>
<body>
<div id="something">AAAA</div>

<script>
$(document).ready(function(){
  var id;
  var cnum = 1;
  setInterval(function(){
    somepage();
    addactiveclass();
   }, 1000);

  function somepage(){
  $('#something').html('<div class="abc">BBBB</div>');
  /*$.ajax({
    url:"fetchcontents.php",
    method:"POST",
    success:function(data){
    $('#something').html(data);
    }
   })*/
  }
  function addactiveclass(){
    /*$('#list-'+id).addClass("active"); */
    $('#something div').addClass("active" + cnum++)
  }

});
</script>
</body>
</html>

我无法重现您的 ajax 响应，因此我刚刚添加了一些代码，以便在每次间隔到期时将 DIV 插入到#something 中（测试时减少到 1000 毫秒）。

然后函数 addactiveclass() 改变了已经添加的 Div 的类。我在每个循环的计数器上更改类名，以便您可以看到该类每次都更新。

您显然必须调整我的代码来处理您的 AKAX 添加的任何内容，但该方法应该可以实现我认为您想要的。

【讨论】：

它仍然继续将类重置为初始值。我已经更新了上面的问题。
我认为我的答案被低估了，因为我没有提供我声称是解决方案的代码。公平的呼吁，现在已经补救了。
顺便说一句，如果您需要删除到达 AJAX 响应的 HTML 中的类，您可以使用 .removeClass(classname) 作为 addactiveclass() 函数的一部分。
感谢您的宝贵时间。我的问题是 setinterval 中的 addactiveclass 函数仅在第一个 ajax 调用 (somepage();) 时保持活动状态，而在随后的 setinterval ajaxcall 中，该类变为非活动状态。因此，我必须通过在文档加载时从 setinterval 中删除 addactiveclass 并将其放入按钮单击函数中来重组我的代码。 $(document).on('click', '.mycontents', function(){ id = $(this).data('id'); setInterval(function(){ addactiveclass(); }, 10); } . 虽然有闪烁但我能得到我想要的结果。
您说“setinterval 中的 addactiveclass 函数仅在第一次 ajax 调用时保持活动状态”但在我的代码中，每次运行 setinterval 函数时都会清楚地调用 addactiveclass() 函数 - 你可以看到颜色变化。