jQuery - Replace div class when click a list

Question

Can someone help me write a jQuery script to replace a div class to another class when a link is clicked. I have a list of addresses, and I want a map image to change when an address is clicked. Due to the structure of the css and gradients on the image, simply changing the backround-image url won't help. I am creating 4 classes for each of the addresses, each with the background image that image of each address.

I have simplified my code so that it is easier to write a script. This is what I have built:

The image wrapper:

<div class="map-wrapper map1">
</div>

The address list:

<ul>
    <li><a href="#map1">Address 1</a></li>
    <li><a href="#map2">Address 2</a></li>
    <li><a href="#map3">Address 4</a></li>
    <li><a href="#map4">Address 5</a></li>
</ul>

The jQuery I had before, when I simply changed an within the map-grad tags.

 var itemInfo = { // Initialise the item information
      img1: ['/img/map.png', ''],
      img2: ['/img/ealing_map.jpg', ''],
};

$(function() {
      $('#maps a').click(function() { // When an item is selected
            var id = $(this).attr('href').replace(/#/, ''); // Retrieve its ID
            $('#info img').attr('src', itemInfo[id][0]); // Set the image
            $('#info p').text(itemInfo[id][1]); // And text
            return false; // Prevent default behaviour
      });
});

I want to write a jQuery script that changes the class 'map1' to 'map2, 3 or 4' when the relevant address link is clicked. This in turn will change the background image! :)

So, can anyone please help me! I am a javascript and jQuery newbie and know not an awful lot!

What is #maps? The <ul>?

Niccolò Campolungo
– Niccolò Campolungo

2013-06-16 12:56:45 +00:00
Commented Jun 16, 2013 at 12:56 — Niccolò Campolungo
– Niccolò Campolungo, Commented Jun 16, 2013 at 12:56

adeneo · Accepted Answer · 2013-06-16 12:57:31Z

2

$('ul li a').on('click', function(e) {
    e.preventDefault();
    var cl = $(this).attr('href').replace('#','');
    $('.map-wrapper').removeClass().addClass('map-wrapper '+cl);
});

FIDDLE

answered Jun 16, 2013 at 12:57

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

adeneo Over a year ago

@LightStyle - just noticed it myself, typing to fast I guess, thanks!

Niccolò Campolungo Over a year ago

It can happen sometimes, don't worry :D +1!

Zaheer Ahmed · Accepted Answer · 2013-06-16 12:57:48Z

0

You need something like

$('.map-wrapper').removeClass().addClass('map-wrapper '+$(this).attr('id'));

answered Jun 16, 2013 at 12:57

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Comments

Régis B. · Accepted Answer · 2013-06-16 13:00:29Z

0

Add the following add the end of your function:

$(".map-wrapper").removeClass("map1 map2 map3 map4").addClass(id);

answered Jun 16, 2013 at 13:00

Régis B.

10.7k6 gold badges58 silver badges95 bronze badges

Collectives™ on Stack Overflow

jQuery - Replace div class when click a list

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related