[英]How to use .each of jquery in a for loop to highlight one label at a time
[英]jQuery .each loop one at a time
我有一个循环,通过一个特定的类(.casebox)。 它检查其他类,并更改标题并通过.load()加载特定内容。
的HTML
<div id="mainbody">
<div class="halfbox">
<h4 class="box casetitle"></h4>
<div class="caseloader loader"><img src="<?php echo $url_resources_images; ?>ajax-loader.gif" alt="Loading..." /><br /><p>Please be patient, loading cases...</p></div>
<div class="casebox dashbox"></div>
</div>
<div class="halfbox">
<h4 class="box casetitle"></h4>
<div class="caseloader loader"><img src="<?php echo $url_resources_images; ?>ajax-loader.gif" alt="Loading..." /><br /><p>Please be patient, loading cases...</p></div>
<div class="casebox dashbox apending"></div>
</div>
Java脚本
function loadCases(){
$(".casebox").each(function(){
getURLs();
boxType();
console.log('activated');
div = $(this).parents('div').eq(0);
div.css('background', 'blue');
//BOXOVERIDE - FOR WHEN THE URL CAN'T BE SET E.G. DASHBOARD
if($(this).hasClass("allopen")){
div.find($('.casetitle').text('All Open Cases'));
caseGET = "&casetype=allopen";
} else if($(this).hasClass("copen")){
div.find($('.casetitle').text('My Created Cases (Open)'));
caseGET = "&casetype=copen";
} else if($(this).hasClass("aopen")){
div.find($('.casetitle').text('My Assigned Cases (Open)'));
caseGET = "&casetype=aopen";
} else if($(this).hasClass("allclosed")){
div.find($('.casetitle').text('All Closed Cases'));
caseGET = "&casetype=allclosed";
} else if($(this).hasClass("cclosed")){
div.find($('.casetitle').text('My Created Cases (Closed)'));
caseGET = "&casetype=cclosed";
} else if($(this).hasClass("aclosed")){
div.find($('.casetitle').text('My Assigned Cases (Closed)'));
caseGET = "&casetype=aclosed";
} else if($(this).hasClass("apending")){
div.find($('.casetitle').text('My Assigned Cases (Pending Close)'));
caseGET = "&casetype=apending";
}
console.log(caseGET);
$(this).load("boxes/cases.php?boxtype=" + boxtype + caseGET + orgGET, function (){
div.find(".caseloader").hide();
});
});
}
但是,它似乎运行很快,当它进入第二个循环时,它似乎将覆盖在第一次运行中所做的设置。 第一次运行没有.hasClass的匹配结果,其标题由函数getURLS()设置。 但是,当第二个循环通过时,它会覆盖在第一个框中设置的内容,并且即使只有第二个具有此类的框,标题仍为“我的指定案例(关闭中)”。 最重要的是,第一个框会加载正确的内容,但是加载栏不会消失,但是第二个框上的加载栏会消失。
关于如何确保它坚持的任何想法? 这可能不是很清楚,但是希望从上面的代码中,将对解释有所帮助。 谢谢。
我不确定boxType,orgGet的来源...但是我认为问题是,当您声明$('。casetitle')之类的东西时,它实际上会在整个文档中搜索这些类。
尝试类似:
function loadCases(){
$(".casebox").each(function(){
getURLs();
boxType();
console.log('activated');
//parent halfbox - only get the first parent
var parent = $(this).parent('.halfbox');
parent.css('background', 'blue');
//seems that you try to get the casetitle all the time
//find the element with the class casetitle, which is inside the parent
var ct = parent.find('.casetitle');
//BOXOVERIDE - FOR WHEN THE URL CAN'T BE SET E.G. DASHBOARD
if($(this).hasClass("allopen")){
//change the html inside the h4
ct.html('All Open Cases');
caseGET = "&casetype=allopen";
} else if($(this).hasClass("copen")){
ct.html('My Created Cases (Open)');
caseGET = "&casetype=copen";
} else if($(this).hasClass("aopen")){
ct.html('My Assigned Cases (Open)');
caseGET = "&casetype=aopen";
} else if($(this).hasClass("allclosed")){
ct.html('All Closed Cases');
caseGET = "&casetype=allclosed";
} else if($(this).hasClass("cclosed")){
ct.html('My Created Cases (Closed)');
caseGET = "&casetype=cclosed";
} else if($(this).hasClass("aclosed")){
ct.html('My Assigned Cases (Closed)');
caseGET = "&casetype=aclosed";
} else if($(this).hasClass("apending")){
ct.html('My Assigned Cases (Pending Close)');
caseGET = "&casetype=apending";
}
console.log(caseGET);
$(this).load("boxes/cases.php?boxtype=" + boxtype + caseGET + orgGET, function (){
parent.find('.caseloader').hide();
});
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.