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.

I don't understand what you need, your jsfiddle seems to be working just fine. — Dunno, Aug 08 '13 at 13:10
var showIt = jQuery(link); Why are you passing a URL to $() ? — Virus721, Aug 08 '13 at 13:11
Thanks guys. @Dunno it's not working. Look at the second and third and fourth red price. They disappear when you click the buttons. Only the first one works. Virus721. Not sure what you mean? What would you recommend please? — Andrew Brown, Aug 08 '13 at 13:13
@Andrew Brown Ah, you're right! I Didn't notice that at first! — Dunno, Aug 08 '13 at 13:16

score 1 · Answer 1 · answered Aug 08 '13 at 13:16

1

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.

answered Aug 08 '13 at 13:16

Joe Simmons

1,828
2
12
9

this is exactly the advice I need - I just can't figure out which bits to change. I'm new to jQuery (maybe i'm getting unnecessarily confused by it). IS there anything you can do to help out? Thanks for your time. – Andrew Brown Aug 08 '13 at 13:17

score 1 · Answer 2 · answered Aug 08 '13 at 13:22

1

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

answered Aug 08 '13 at 13:22

Optimus Prime

6,817
5
32
60

1

Thanks so much for trying to help. Is there anyway you could fork the fiddle and update quickly to show what you mean, please? – Andrew Brown Aug 08 '13 at 13:24

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

This is a working version: jsFiddle.

Did the following:

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">
```

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

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

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]")

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 08 '13 at 13:24

edsioufi

8,297
3
36
42

thank you man! it seems to work for euro and pounds button but not for dollars. Is there any reason that would be? – Andrew Brown Aug 08 '13 at 13:28
1

Fixed [here](http://jsfiddle.net/wkvw2/4/). You were missing the dollar sign before the dollar prices in your html. – edsioufi Aug 08 '13 at 13:33
Awesome. So awesome! Wish I could understand jQuery thank you so much for your help. – Andrew Brown Aug 08 '13 at 13:35
1

I edited my post and prepended the custom attributes with the "data-" prefix becasue this is the way to do it according to [this discussion on SO](http://stackoverflow.com/questions/992115/custom-attributes-yea-or-nay). The final version of the fiddle is in the post itself. – edsioufi Aug 08 '13 at 13:38
Thank you, so clever! If javascript is not working on a device, would this simply show the default price, or would it show all three? – Andrew Brown Aug 08 '13 at 13:43
It would only show the default as the css is hiding the other 2 on load (cc class vs cc.current class). – edsioufi Aug 08 '13 at 13:47
Perfect, thank you. If you can help with one final question, that would be awesome. The actual implementation is here: http://design4writers.wpengine.com/cover-design/ I just need the button of the active currency to change colour when it is active - so it would be green the same as the currency circles. Would you know how to do that? :active isn't working. – Andrew Brown Aug 08 '13 at 13:50
1

I would toggle the class of the button in the 'click' using removeClass and addClass functions just like you did with the hideIt and showIt elements. You will probably use the classes 'btn-danger' and 'btn-success' as it seems you are using Bootstrap :) – edsioufi Aug 08 '13 at 13:56
But what do I add so it knows when it needs to use those classes? – Andrew Brown Aug 08 '13 at 14:06
[This](http://jsfiddle.net/wkvw2/7/) should get you going. Notice that I have modified the HTML: assuming you are using bootstrap, you don't have to use a button within your elements. You should rather apply the btn classes to the directly and they will take the aspect of the buttons. – edsioufi Aug 08 '13 at 14:56

score 1 · Answer 4 · edited May 23 '17 at 12:05

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

});

Oskar Hane · Answer 5 · 2013-08-08T14:05:35.053

1

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>

edited Aug 08 '13 at 14:05

answered Aug 08 '13 at 13:29

Oskar Hane

1,824
13
8

Hmm, it seems I forgot to save that fiddle. So sorry. – Oskar Hane Aug 08 '13 at 13:59

Target multiple divs with jQuery

5 Answers5

NB: