jquery .attr() 类开关不起作用
[英]jquery .attr() class switch not working
问题描述
我正在开发一个网络服务，
当用户通过ajax请求更多数据时，我希望包含数据的div显示一个加载圆圈。 当我想要圆圈时，我在样式文件中写了一个 css 类：
.ajax_getTeams_loading{
background: url('ajax-loader.gif') no-repeat center center;
}
所以我的ajax函数是这样的：
function(profile, divId){
$('#' + divId).attr('class', 'goose');
/*$.get('testGetTeams.php', {username: profile}, function(data) {
$('#' + divId).html(data);
});*/
}
问题是圆圈永远不会出现。 我尝试将 css 类简化为背景颜色：蓝色，但这甚至不起作用。 我也完全删除了ajax部分，它仍然根本不起作用。 我做错了什么？
5 个解决方案
解决方案1
1 2010-10-10 16:21:42
尝试使用
$('#'+divId).removeClass('old_class');
$('#'+divId).addClass('new_class');
解决方案2
1 已采纳 2010-10-10 16:25:14
在这一点上，我没有看到您将“ajax_getTeams_loading”类添加到 div。 但是，因为它是背景，所以如果 div 中有数据，您可能看不到它。 然后它将位于文本下方或 div 中的任何内容下方。
最好用加载图标替换 div 中的任何内容，然后用新请求的数据替换加载图标。 示例：
// store your div object in a variable,
// this is faster since you'll be using it multiple times
var div = $('#' + divId);
// replace the div's content with the loader
// you might want to add a width and height to the css
// to make sure the div is large enough to show the entire loading icon
var loader = '<div class="ajax_getTeams_loading"></div>';
div.html(loader);
$.get('testGetTeams.php', {username: profile}, function(data) {
// replace the loader icon with the requested data
div.html(data);
});解决方案3
0 2010-10-10 16:36:12
解决方案4
0 2010-10-10 16:42:53
请注意， attr将清空属性并将其替换为您传递的内容，因此在类中，我们可以拥有其中的几个，如果您有，例如：
<div id="ajax_getTeams_loading"
class="classA classB classC">text</div>
你用
$("#ajax_getTeams_loading").attr("class", "classD");
这将最终有：
文字
这不可能是你想要的。 对于这个addCLass和removeClass结果以更好的方式，以你的具体情况添加和删除CSS类的DOM元素，你可以很容易地改变你做的事情（的方式不是，如果没有工作，但是这是你发现了什么在那里最多）
<html>
<head>..</head>
<body>
<div id="ajax-response-wrapper">
<div id="ajax-loading" style="display:none;">
<img src="loading.gif" alt="" /></div>
<ul id="myAjaxPopulatedList"></ul>
</div>
<a id="load" href="javascript:void(0);">Load list from ajax</a>
<script>
$(document).ready( function() {
$("#load").click( function() {
// let's show the loading while we are fetching data
$("#ajax-loading").show();
// get our stuff
$.get('testGetTeams.php', {username: profile}, function(data) {
// we got it, let's hide the loading now
$("#ajax-loading").hide();
// and append the data
$('#myAjaxPopulatedList').append(data);
});
});
});
</script>
</body>
</html>
我希望这可以帮助你得到你想要的东西，看看东西是如何工作的。
解决方案5
0 2010-10-11 12:36:51
jQuery 具有 AJAX 的启动和停止指示器。 由于您使用的是 ajax 调用，您可以尝试一下。
function(profile, divId){
$.ajaxStart(function() {
// add the loading class while ajax is working
$('#loading').addClass("ajax_getTeams_loading");
});
$.ajaxComplete(function() {
// hide the loading div when we're done
$('#loading').hide();
});
// initiate the object sent to the server as a post
var data = {};
data.username = profile;
$.ajax({
url: "testGetTeams.php",
data: data,
type: "POST",
success: function(data){
$('#' + divId).html(data);
}
});
}
菜单的jQuery开关类不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.