Javascript 动态选择要在函数中运行的数组

我试图让jQuery函数根据一次按钮点击动态地决定哪个数组通过它运行。理想情况下，这就是它的工作方式：

$(".view-more-concerts, .view-more-sports").click(function() {
  
  if($(this).is('.view-more-concerts')) {
    var alts = altConcert;
    var imgs = imgConcert;
    var subject = 'concert';
    var container = 'Concert';
  }
  else ($(this).is('.view-more-sports')) {
    var alts = altSport;
    var imgs = imgSport;
    var subject = 'sport';
    var container = 'Sport';
  }
  else {
    return false;
  }

  //Load the next 3 images
  for (i = 0; i < 3; i++) { 
      
    $("#extra"+container).append(
      '<div">' +
        '<h3>'+alts[count]+'</h3>' +
        '<img src="'+imgs[count]+'" alt="'+alts[count]+'"/>' +
      '</div>');

    count++;
  }

  //Scroll to the top (+100px) of the newly loaded images
  $('<div id="new-'+concert+'-div'+count+'">&nbsp;</div>').appendTo('#extra'+container);
  $('body, html').animate({ scrollTop: $('#new-'+concert+'-div'+count+'').offset().top - 100}, 1000);

  //Remove the "View More" button when out of images
  if (count >= imgs.length) {
    $(".view-more-"+subject).css("display", "none");
    return;
  }
});

• 用户单击其中一个“查看更多…”按钮
• 该程序加载该特定类别（运动、音乐会等）的下3张图像

以下是该功能的一个版本，但仅适用于音乐会部分：

var altConcert=[
“音乐会1”，
“音乐会2”，
“音乐会3”，
“音乐会4”，
“音乐会5”，
“音乐会6”
];
变量imgConcert=[
"https://via.placeholder.com/101/000000",
"https://via.placeholder.com/102/000000",
"https://via.placeholder.com/103/000000",
"https://via.placeholder.com/104/000000",
"https://via.placeholder.com/105/000000",
"https://via.placeholder.com/106/000000"
];
var altSport=[
“体育1”，
“运动2”，
“体育3”，
“体育4”，
“运动5”，
“体育6”
];
变量imgSport=[
"https://via.placeholder.com/101/0000FF",
"https://via.placeholder.com/102/0000FF",
"https://via.placeholder.com/103/0000FF",
"https://via.placeholder.com/104/0000FF",
"https://via.placeholder.com/105/0000FF",
"https://via.placeholder.com/106/0000FF"
];
var计数=0；
$（“.load more concerts”）。单击（函数（）{
//加载接下来的3个图像
对于（i=0；i<3；i++）{
$（“#extraConcert”）.append(
“这只是一个快速的答案。我可能会将
alt
和
img
数组与
{alt:''，img:''}
组合成一个数组，但我没有时间

基本上，我们的想法是，构建数据以满足您的需要


var数组={
音乐会：{
alt:[
“音乐会1”，
“音乐会2”，
“音乐会3”，
“音乐会4”，
“音乐会5”，
“音乐会6”
],
img：[
"https://via.placeholder.com/101/000000",
"https://via.placeholder.com/102/000000",
"https://via.placeholder.com/103/000000",
"https://via.placeholder.com/104/000000",
"https://via.placeholder.com/105/000000",
"https://via.placeholder.com/106/000000"
]
},
运动：{
alt:[
“体育1”，
“运动2”，
“体育3”，
“体育4”，
“运动5”，
“体育6”
],
img：[
"https://via.placeholder.com/101/0000FF",
"https://via.placeholder.com/102/0000FF",
"https://via.placeholder.com/103/0000FF",
"https://via.placeholder.com/104/0000FF",
"https://via.placeholder.com/105/0000FF",
"https://via.placeholder.com/106/0000FF"
]
}
};
var计数=0；
$（“.load more concerts”）。单击（函数（）{
//加载接下来的3个图像
对于（i=0；i<3；i++）{
$（“#extraConcert”）.append(
“您可以使用
data
html属性来实现所需的功能

在js文件中，您只需获取这些数据属性并验证它们，就像我在下面的代码中所做的那样


var altConcert=[
“音乐会1”，
“音乐会2”，
“音乐会3”，
“音乐会4”，
“音乐会5”，
“音乐会6”
];
变量imgConcert=[
"https://via.placeholder.com/101/000000",
"https://via.placeholder.com/102/000000",
"https://via.placeholder.com/103/000000",
"https://via.placeholder.com/104/000000",
"https://via.placeholder.com/105/000000",
"https://via.placeholder.com/106/000000"
];
var altSport=[
“体育1”，
“运动2”，
“体育3”，
“体育4”，
“运动5”，
“体育6”
];
变量imgSport=[
"https://via.placeholder.com/101/0000FF",
"https://via.placeholder.com/102/0000FF",
"https://via.placeholder.com/103/0000FF",
"https://via.placeholder.com/104/0000FF",
"https://via.placeholder.com/105/0000FF",
"https://via.placeholder.com/106/0000FF"
];
var计数=0；
$（“.load more”）。单击（函数（）{
设alt=window[$（this）.attr（'data-alt'）；
设img=window[$（this）.attr（'data-img'）；
让target=$（this.attr（'data-target'）；
//加载接下来的3个图像
对于（i=0；i<3；i++）{
$（`${target}`）。追加(
“所选按钮在其绑定单击函数中应可作为$（this）访问。您可以检查所单击按钮的类别。因此，坚持使用原始代码和数据结构应该可以：

$(".view-more-concerts, .view-more-sports").click(function() {
  
  if($(this).is('.view-more-concerts')) {
    var alts = altConcert;
    var imgs = imgConcert;
    var subject = 'concert';
    var container = 'Concert';
  }
  else ($(this).is('.view-more-sports')) {
    var alts = altSport;
    var imgs = imgSport;
    var subject = 'sport';
    var container = 'Sport';
  }
  else {
    return false;
  }

  //Load the next 3 images
  for (i = 0; i < 3; i++) { 
      
    $("#extra"+container).append(
      '<div">' +
        '<h3>'+alts[count]+'</h3>' +
        '<img src="'+imgs[count]+'" alt="'+alts[count]+'"/>' +
      '</div>');

    count++;
  }

  //Scroll to the top (+100px) of the newly loaded images
  $('<div id="new-'+concert+'-div'+count+'">&nbsp;</div>').appendTo('#extra'+container);
  $('body, html').animate({ scrollTop: $('#new-'+concert+'-div'+count+'').offset().top - 100}, 1000);

  //Remove the "View More" button when out of images
  if (count >= imgs.length) {
    $(".view-more-"+subject).css("display", "none");
    return;
  }
});

$（“.观看更多音乐会，.观看更多运动”）。单击（函数（）{
如果（$（this）.is（'.view more concerts'））{
var alts=altConcert；
var imgs=imgConcert；
var subject=‘concert’；
var容器='Concert'；
}
else（$（this）.is（'.view more sports'））{
var alts=altSport；
var imgs=imgSport；
var主题=‘运动’；
var容器='Sport'；
}
否则{
返回false；
}
//加载接下来的3个图像
对于（i=0；i<3；i++）{
$（“#额外”+容器）。附加(
'