Target multiple divs with jQuery

Question

I can't tell you how much I would appreciate some help with this.

I am trying to have three buttons, so that visitors can press a button and display pricing in their preferred currency.

I understand how to do this with one column beneath But as you will see, when I am applying it to multiple columns, only the first one works (with the price switching when the button is clicked).

I understand that id's in html cannot be repeated, and that this is likely the source of the problem. However I do not know what to do to make the targeting work on something other than ID's.

I have pasted all of the code into this fiddle: http://jsfiddle.net/Rd7mV/ - note that the prices which should be changed are highlighted in red on the fiddle.

The javascript is here:

jQuery("#menu a").click(function () {
    var link = jQuery(this).attr('href');
    var showIt = jQuery(link);
    var hideIt = jQuery(".cc.current");

    hideIt.fadeOut(100, function () {
        hideIt.removeClass("current");
        showIt.addClass("current");
        showIt.fadeIn(100);
    });
});

Please, please if someone can help, this would be a lifesaver. I have searched high and low, and just really need some help on the implementation.

Thank you. AB.

Answer 1

This is a working version: jsFiddle.

Did the following:

1. Instead of using the href to store the currency used a custom attribute data-targetCurrency (this is better to prevent the behaviour of href):

   <a href="javascript: void(0);" data-targetCurrency="currencyeuros"><button class="btn btn-danger">
   

2. Instead of using id, used another custom attribute data-currency:

   <div class="cc" data-currency="currencyeuros">&euro;159</div>
   

3. Changed the javascript to:

   jQuery("#menu a").click(function () {
       var currency = jQuery(this).attr('data-targetCurrency');
       var showIt = jQuery("[data-currency=" + currency + "]");
       var hideIt = jQuery(".cc.current");
   
       hideIt.fadeOut(100, function () {
           hideIt.removeClass("current");
           showIt.addClass("current");
           showIt.fadeIn(100);
       });
   });
   

NB:

The jQuery selector for an attribute is jQuery("[attributename = attributevalue]")

Answer 2

Instead of trying to show all the IDs of #currencypounds, for example, try using classes.

You have hidden DIVs for each section with the IDs #currencypounds, #currencyeuros, #currencydollars. Change those to classes instead of IDs, then use your links to show a specific class and hide the rest of the classes. I don't have time to change this all for you, but you should be able to figure it out.

Answer 3

Use classes instead of id, example,

You give a class to multiple elements that have class dollar. You may select those elements now by,

$(".dollar"). Now for example you need to removeClass current from all the elements with class dollar, use,

$(".dollar").removeClass('current');

Answer 4

I would look into data attributes. Obviously your jQuery is simply targeting the first item, not all. Take a look at the fiddle which targets multiple divs.

jQuery Show and Hide multiple divs with a selected class

http://jsfiddle.net/fKHsB/

jQuery(function() {
jQuery('.buttons a').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
    var target = $(this).data('target');
    if (target === 'all') {
        jQuery('.targetDiv').show();
    } else {
        jQuery('.targetDiv').hide();
        jQuery('#div' + target).show();
    }
});

});

Answer 5

Yes, your problem is that you have multiple elements with the same id. You need to reference classes instead of id's.

I've modified your fiddle to make it work. I changed the id's to classes.

http://jsfiddle.net/kMYye/1/

<div class="cc current currencypounds">&pound;1369</div>