Question

嗨，我正尝试从div中删除一个类（隐藏类），并想添加一个类（显示类）。我为此使用addClass和removeClass，但是这样做很有趣。

$('#table-csv').removeClass('hideDiv')

它正在从div中删除类，但立即又添加了它。我正在Django视图的ajax成功响应中做到这一点。

我尝试了Stackoverflow和其他网站上提供的许多解决方案，但没有运气。

css类：

.hideDiv{
    display: none;
}
.showDiv{
    display: block;
}

我的脚本：

  $.ajax(
{
    type:"POST",
    url: "/graph/upload-csv/",
    headers: {'X-CSRFToken': '{{ csrf_token }}'},
    data:{
      input: input,
      output: output,
    },
    success: function( data ) 
    {

      $('#table-csv').addClass('showDiv').removeClass('hideDiv');
    }
})

当我尝试removeClass单击简单按钮时，它可以正常工作。问题只是当我在ajax成功响应中这样做时

我知道这个问题我会得到很多反对，但我需要帮助。

Answer 1

您可能不需要两个单独的类来隐藏另一个要显示的类。而是创建一个类

.hide{
 display:none;
}

何时需要隐藏元素$(elementSelector).addClass('hide')，何时需要显示$(elementSelector).removeClass('hide')

Answer 2

在DOM中插入AJAX调用中的代码，然后在success函数中删除该类：

$.ajax({
 ...
 success : function (data) {
     $("#div").html(data).find('#table-csv').addClass('showDiv').removeClass('hideDiv');
 },
});

我的建议：为成功函数中的“数据”做一些console.log，以测试响应。

Answer 3

您是否像这样声明内联的hide类：

$('#table-csv').addClass('showDiv').removeClass('hideDiv');

.hideDiv {
  display: none;
}

.showDiv {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hideDiv">
test
</div>

这似乎不起作用。然后尝试将其删除，然后添加通过JavaScript的类。

$('#table-csv').addClass('hideDiv');
$('#table-csv').addClass('showDiv').removeClass('hideDiv');

.hideDiv {
  display: none;
}

.showDiv {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
test
</div>

Answer 4

我认为当您使用ajax时，您无法访问UI线程，似乎它们具有不同的线程，因此，一种简单的方法是将dom元素保存到变量中，然后在其中进行操作ajax成功，换句话说，success事件将不会真正访问dom元素或其他UI对象：

var myElement =  $('#table-csv');
$.ajax(
{
    type:"POST",
    url: "/graph/upload-csv/",
    headers: {'X-CSRFToken': '{{ csrf_token }}'},
    data:{
      input: input,
      output: output,
    },
    success: function( data ) 
    { 
       myElement.addClass('showDiv').removeClass('hideDiv');
    }
})

或者这可能是因为先后调用removeClass和addClass，最好像这样分别调用它们：

$.ajax(
{
    type:"POST",
    url: "/graph/upload-csv/",
    headers: {'X-CSRFToken': '{{ csrf_token }}'},
    data:{
      input: input,
      output: output,
    },
    success: function( data ) 
    { 
        $('#table-csv').addClass('showDiv');
    },
   stop: function( data ) 
    { 
        $('#table-csv').removeClass('hideDiv');
    }
})

jQuery addClass将一个类添加到div但也立即将其删除

4 个答案: