使用带有jquery函数的数组并循环遍历它

I would like to condense this code:

我想浓缩这段代码:

$("a.clearfix.scalability").click(function() {
  $("h2.cases-header").fadeOut(100, function () {
   $("h2.cases-header").text("Scalability").fadeIn(100);
})
})
$("a.clearfix.international-compliance").click(function() {
  $("h2.cases-header").fadeOut(100, function () {
    $('h2.cases-header').text("International Compliance").fadeIn(100);
  })
})
$("a.clearfix.rewards").click(function() {
  $("h2.cases-header").fadeOut(100, function () {
    $('h2.cases-header').text("Rewards Program").fadeIn(100);
  })
})
$("a.clearfix.mom-baby").click(function() {
  $("h2.cases-header").fadeOut(100, function () {
    $('h2.cases-header').text("Mom & Baby").fadeIn(100);
  })
})
$("a.clearfix.online-travel-agency").click(function() {
  $("h2.cases-header").fadeOut(100, function () {
    $('h2.cases-header').text("Online Travel Agency").fadeIn(100);
  })
})
$("a.clearfix.food-delivery").click(function() {
  $("h2.cases-header").fadeOut(100, function () {
    $('h2.cases-header').text("Food Delivery").fadeIn(100);
  })
})

I am wondering the proper way to set this up. I've started with 2 separate arrays with the information that I need to plug in to the jquery function but am unsure of how to get it to loop through or if I am calling the array objects correctly. My code so far is:

我想知道设置它的正确方法。我已经开始使用2个单独的数组,其中包含我需要插入jquery函数的信息,但我不确定如何让它循环或者我是否正确调用数组对象。到目前为止我的代码是:

var anchors = ["a.clearfix.scalability", "a.clearfix.international-
compliance", "International Compliance", "a.clearfix.mom-baby", 
"a.clearfix.food-delivery"];
var copy = ["Scalability", "International Compliance", "Rewards Program", 
"Online Travel Agency", "Food Delivery"];

$(anchors[0]).click(function() {
  $("h2.cases-header").fadeOut(100, function () {
      $("h2.cases-header").text(copy[0]).fadeIn(100);
  })
})

2 个解决方案

#1

If you change the shape of your JavaScript arrays to be a single array of JavaScript objects, each of which contains an anchor and a copy property, then you can iterate it and wire up the eventing as desired:

如果将JavaScript数组的形状更改为单个JavaScript对象数组,每个数组都包含一个锚点和一个复制属性,那么您可以迭代它并根据需要连接事件:

var headers = [
    {anchor: "a.clearfix.scalability", copy: "Scalability"},
    {anchor: "a.clearfix.international-compliance", copy: "International Compliance"}
];

$.each(headers, function(index, header) {
    $(header.anchor).click(function() {
        $("h2.cases-header").fadeOut(100, function () {
            $("h2.cases-header").text(header.copy).fadeIn(100);
        })
    })
});

#2

You can use data- attributes on the html elements to store additional data that you can grab inside of event handlers, like so:

您可以使用html元素上的数据属性来存储可以在事件处理程序中获取的其他数据,如下所示:

$(".cases-header-link").click(function() {
  var link = $(this);
  $("h2.cases-header").fadeOut(100, function() {
    $('h2.cases-header').text(link.attr("data-text")).fadeIn(100);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="Javascript:void(0)" class="clearfix cases-header-link" data-text="Scalability">Scalability</a>
  <a href="Javascript:void(0)" class="clearfix cases-header-link" data-text="Rewards Program">Rewards Program</a>
  <a href="Javascript:void(0)" class="clearfix cases-header-link" data-text="Mom & Baby">Mom &amp; Baby</a>
  <a href="Javascript:void(0)" class="clearfix cases-header-link" data-text="Food Delivery">Food Delivery</a>
</div>
<h2 class="cases-header"></h2>