Question

我想简化这段代码：

$("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);
  })
})

我想知道设置它的正确方法。我已经开始使用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);
  })
})

Answer 1

如果您将JavaScript数组的形状更改为单个JavaScript对象数组，每个JavaScript对象都包含anchor和copy属性，那么您可以迭代它并连接事件根据需要：

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);
        })
    })
});

Answer 2

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

$(".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>

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

2 个答案: