using an array with a jquery function and looping through it

Question

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:

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

How is the HTML structured? Are you trying to target elements sequentially? If so, you could use jQuery's .next(). — Obsidian Age
– Obsidian Age, Commented Jun 21, 2017 at 20:12

dana · Accepted Answer · 2017-06-21 20:12:15Z

2

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:

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

answered Jun 21, 2017 at 20:12

dana

18.3k7 gold badges71 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mhodges · Accepted Answer · 2017-06-21 20:14:24Z

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

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

Collectives™ on Stack Overflow

using an array with a jquery function and looping through it

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related