我想以动态的方式缩短下面的代码。该代码用于加载每个部分中具有类名“region 1,2,3,4”的标记的数量。它加载到p端标记中的相应div。请Maven帮忙。
//加载基于区域的事件在区域瓦片中的计数
$(document).ready(function(){
//load count on page load
//Default one on page load
var region1 = $('#tab1 .region1').length;
$(".Regions_latam p").text(region1 + " Events");
console.log(region1);
var region2 = $('#tab1 .region2').length;
$(".Regions_global p").text(region2 + " Events");
var region3 = $('#tab1 .region3').length;
$(".Regions_na p").text(region3 + " Events");
var region4 = $('#tab1 .region4').length;
$(".Regions_emea p").text(region4 + " Events");
var region5 = $('#tab1 .region5').length;
$(".Regions_atci p").text(region5 + " Events");
//Default one on page load ends
$(".tab1").click(function() {
console.log("tab1 clicked");
var region1 = $('#tab1 .region1').length;
$(".Regions_latam p").text(region1 + " Events");
var region2 = $('#tab1 .region2').length;
$(".Regions_global p").text(region2 + " Events");
var region3 = $('#tab1 .region3').length;
$(".Regions_na p").text(region3 + " Events");
var region4 = $('#tab1 .region4').length;
$(".Regions_emea p").text(region4 + " Events");
var region5 = $('#tab1 .region5').length;
$(".Regions_atci p").text(region5 + " Events");
});
$(".tab2").click(function() {
var region1 = $('#tab2 .region1').length;
$(".Regions_latam p").text(region1 + " Events");
var region2 = $('#tab2 .region2').length;
$(".Regions_global p").text(region2 + " Events");
var region3 = $('#tab2 .region3').length;
$(".Regions_na p").text(region3 + " Events");
var region4 = $('#tab2 .region4').length;
$(".Regions_emea p").text(region4 + " Events");
var region5 = $('#tab2 .region5').length;
$(".Regions_atci p").text(region5 + " Events");
});
$(".tab3").click(function() {
var region1 = $('#tab3 .region1').length;
$(".Regions_latam p").text(region1 + " Events");
var region2 = $('#tab3 .region2').length;
$(".Regions_global p").text(region2 + " Events");
var region3 = $('#tab3 .region3').length;
$(".Regions_na p").text(region3 + " Events");
var region4 = $('#tab3 .region4').length;
$(".Regions_emea p").text(region4 + " Events");
var region5 = $('#tab3 .region5').length;
$(".Regions_atci p").text(region5 + " Events");
});
$(".tab4").click(function() {
var region1 = $('#tab4 .region1').length;
$(".Regions_latam p").text(region1 + " Events");
var region2 = $('#tab4 .region2').length;
$(".Regions_global p").text(region2 + " Events");
var region3 = $('#tab4 .region3').length;
$(".Regions_na p").text(region3 + " Events");
var region4 = $('#tab4 .region4').length;
$(".Regions_emea p").text(region4 + " Events");
var region5 = $('#tab4 .region5').length;
$(".Regions_atci p").text(region5 + " Events");
});
});
//查看隐藏基于区域的事件
https://jsfiddle.net/anoopsuda/zr4eub7g/33/
2条答案
按热度按时间mcdcgff01#
这个逻辑有帮助吗?
也许你可以遵循上述逻辑,这可能有助于你动态地获得预期的输出。
dwthyt8l2#
你可以这样添加:逻辑是创建一个函数,传递controlname或classname,并将文本设置为参数。
https://jsfiddle.net/a95zsurg/