javascript - 通过函数动态选择运行哪个数组

Question

我正在尝试使 jQuery 函数根据单击按钮动态决定运行哪个数组。理想情况下，它是这样工作的:

• 用户点击“查看更多...”按钮之一。
• 该程序会加载该特定类别(体育、音乐会等)的下 3 张图片。

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

var altConcert = [
  "Concert 1",
  "Concert 2",
  "Concert 3",
  "Concert 4",
  "Concert 5",
  "Concert 6"
];

var 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 = [
  "Sport 1",
  "Sport 2",
  "Sport 3",
  "Sport 4",
  "Sport 5",
  "Sport 6"
];

var 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 count = 0;

$(".load-more-concerts").click(function() {
  //Load the next 3 images
  for (i = 0; i < 3; i++) { 
      
    $("#extraConcert").append(
      '<div">' +
        '<h3>'+altConcert[count]+'</h3>' +
        '<img src="'+imgConcert[count]+'" alt="'+altConcert[count]+'"/>' +
      '</div>');

    count++;
  }

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

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

#Concerts { float: left; padding-right: 100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="Concerts">    
  <div id="extraConcert">
    <div id="new-concert-div1">&nbsp;</div>
  </div>

  <div class="load-more-concerts">
    <button class="view-more-concerts">View More Concerts</button>
  </div>
</div>


<div id="Sports">
  <div id="extraSports">
    <div id="new-sports-div1">&nbsp;</div>
  </div>

  <div class="load-more-sports">
    <button class="view-more-sports">View More Sports</button>
  </div>
</div>

有没有一种方法可以使用 div 的 ID 名称(“Sports”或“Concerts”)或者将数组作为参数传递给 jQuery 函数？还是有其他更简单的方法来解决我完全想念的这个问题？如果我只是用不同的名称复制函数，我相信我可以让它工作，但我正在尝试遵循 DRY Principle .

Answer 1

您可以使用 data html 属性来实现您要查找的内容。

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

var altConcert = [
  "Concert 1",
  "Concert 2",
  "Concert 3",
  "Concert 4",
  "Concert 5",
  "Concert 6"
];

var 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 = [
  "Sport 1",
  "Sport 2",
  "Sport 3",
  "Sport 4",
  "Sport 5",
  "Sport 6"
];

var 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 count = 0;

$(".load-more").click(function() {
    let alt = window[$(this).attr('data-alt')];
  let img = window[$(this).attr('data-img')];
  let target = $(this).attr('data-target');
  //Load the next 3 images
  for (i = 0; i < 3; i++) { 
      
    $(`#${target}`).append(
      '<div">' +
        '<h3>'+alt[count]+'</h3>' +
        '<img src="'+img[count]+'" alt="'+alt[count]+'"/>' +
      '</div>');

    count++;
  }

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

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

#Concerts { float: left; padding-right: 100px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="Concerts">    
  <div id="extraConcert">
    <div id="new-concert-div1">&nbsp;</div>
  </div>

  <div class="load-more-concerts load-more" data-alt="altConcert" data-img="imgConcert" data-target="extraConcert">
    <button class="view-more-concerts">View More Concerts</button>
  </div>
</div>


<div id="Sports">
  <div id="extraSports">
    <div id="new-sports-div1">&nbsp;</div>
  </div>

  <div class="load-more-sports load-more" data-alt="altSport" data-img="imgSport" data-target="extraSports">
    <button class="view-more-sports">View More Sports</button>
  </div>
</div>

在我的代码中，我获取了 data 属性，在这种情况下，我使用了 data-target、data-alt和 data-img。

• data-target 将使用 id 的目标。
• data-alt 将是 alt 数组。
• data-img 将是 img 数组。

在 javascript 代码中，我使用 window 从返回的 data-* 字符串中获取变量。

当 count 大于数组长度时，它开始抛出 undefined ，但这可以通过 if(alt[count] ! == 未定义)。

关于data 属性的更多信息可以在这里找到:https://www.w3schools.com/tags/att_data-.asp