jQuery addclass when clicked and remove class when something else is clicked

Question

Ok so I'm building a photo frame designer. On it I want it so that when a pattern is clicked it fills the text with the pattern. I have achieved this using .addClass. Problem being that my .addClass stops my .css from working. Also I can't reclick it. To see what im talking about see here

Here is my code

    $("#pattern1").click (function() {
        $('.text').addClass('background1');
    });

    $('#purple').click (function() {
            $(".border").css("fill", "#a077a6");
    });

Please don't ask for a js fiddle. Just use the website.

"Please don't ask for a js fiddle. Just use the website." ..Nice one. — Alex Char, Sep 26 '14 at 12:14
@thinkrite Try to use Id instead of Class name in $('.text').addClass('background1');, may be it works — Vinit Patel, Sep 26 '14 at 12:16
your mean change the text class to an id class? Or use addId instead of addClass. Not even sure of addId is a thing — thinkrite, Sep 26 '14 at 12:17
Change the .text to an ID so #text. And there is a second `
Your words here
` body-Tag which should not be there.. — Bernd, Sep 26 '14 at 12:20
@thinkrite i mean $('.text').addClass('background1'); in this line see .text is class name and instead of that use element id — Vinit Patel, Sep 26 '14 at 12:20
it's exactly the same problem. Change the .text to #text makes no difference. — thinkrite, Sep 26 '14 at 12:25

Bernd · Accepted Answer · 2014-09-26T12:32:48.270

1

I'believe that the problem is that you add every time a class but the class will not be removed after clicking on an other pattern. So I've just clicked on every Pattern and this is the changed source-code:

<p style="color: rgb(0, 51, 114);" class="text background2 background3 background4 background5 background1 background6 background7 background8 background9 background10 background11 background12">Your words here</p>

So simply JS don't know what to do with the background-classes. Change the <p>-Tag to following:

<p id="text">Your words here</p>

and change every Function to:

  $("#patternXXX").click (function() {
      $('#text').removeClass();
      $('#text').addClass('backgroundXXX');
  });

So every class will be removed and the only needed class will be added.

Greetings

edited Sep 26 '14 at 12:32

answered Sep 26 '14 at 12:26

Bernd

730
1
5
13

" the problem is that you add the classes but they aren't being deleted after selecting something else" - yes that's exactly the problem. What's wrong with the your words here? Ahh but the remove class could work. Let me try it. Thanks – thinkrite Sep 26 '14 at 12:29
@thinkrite Please clear out this, class add on click but it's not remove in other click? am i right? – Vinit Patel Sep 26 '14 at 12:30
Haha just some gibberish. My english is not so good LOL. Edited the code below. (And also the gibberish..) – Bernd Sep 26 '14 at 12:31
it changes between the patterns which is the .addClass bit perfectly. Although the .css no longer works. I suppose I could change .css to .addClass but that would involve creating a load of classes. – thinkrite Sep 26 '14 at 12:32
When i select a pattern and change the Text-Color it works perfectly. Browser bug? Or should the pattern be removed by clicking on the Text-Color? – Bernd Sep 26 '14 at 12:37
Yes the pattern should be replaced by the color. – thinkrite Sep 27 '14 at 07:37

jQuery addclass when clicked and remove class when something else is clicked

1 Answers1