在jQuery中根据项目的类名获取项目计数

vs91vp4v  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(114)

我想以动态的方式缩短下面的代码。该代码用于加载每个部分中具有类名“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/

mcdcgff0

mcdcgff01#

这个逻辑有帮助吗?

$(document).ready(function () {
  // Load count on page load
  $(".tabData").each(function () {
    updateRegionCount($(this));
  });

  // Click event for tabs
  $(".tab").click(function () {
    var tabId = $(this).data("tab");
    var $tabData = $("#" + tabId);
    updateRegionCount($tabData);
  });

  function updateRegionCount($tabData) {
    var regions = {};
    $tabData.find("div[class^='region']").each(function () {
      var regionClass = $(this).attr("class").split(" ")[0];
      regions[regionClass] = (regions[regionClass] || 0) + 1;
    });

    for (var regionClass in regions) {
      $("." + regionClass + " p").text(regions[regionClass] + " Events");
    }
  }
});

也许你可以遵循上述逻辑,这可能有助于你动态地获得预期的输出。

dwthyt8l

dwthyt8l2#

你可以这样添加:逻辑是创建一个函数,传递controlname或classname,并将文本设置为参数。

function setTextToPTab(ControlName, className, textToSet){
  if(ControlName != undefined && ControlName != null)
    $("#" + ControlName + " p").text(textToSet);
  if(className != undefined && className != null)
    $("."+ className +" p").text(textToSet);

}

// Load region based event's count in region tiles

$(document).ready(function(){
 
//load count on page load
//Default one on page load
var region1 = $('#tab1 .region1').length;
setTextToPTab( null, 'Regions_latam', (region1.toString() + " Events")) ; //$(".Regions_latam p").text(region1 + " Events");

})

https://jsfiddle.net/a95zsurg/

相关问题