1

I have a piece of code:

<div id="tab1" class="w-tab-pane" data-w-tab="Tab 1">
              <div class="text-block">ΜΕΓΕΘΗ</div>
              <a class="button w-button <?php if(in_array("xs",$arr_shirts)) echo "kg-active-btn-size"; ?>" id="shirt_0" onclick="getSize('hidden_shirt_0','xs');" href="#">XS</a> <!-- (86-91) -->
                <input type="hidden" id="hidden_shirt_0" value="<?php if(in_array("xs",$arr_shirts)) echo "xs"; ?>" />
              <a class="button w-button <?php if(in_array("s",$arr_shirts)) echo "kg-active-btn-size"; ?>" id="shirt_1"  onclick="getSize('hidden_shirt_1','s');" href="#">S</a>
                <input type="hidden" id="hidden_shirt_1" value="<?php if(in_array("s",$arr_shirts)) echo "s"; ?>" />
              <a class="button w-button <?php if(in_array("m",$arr_shirts)) echo "kg-active-btn-size"; ?>" id="shirt_2" onclick="getSize('hidden_shirt_2','m');" id="shirt_2" href="#">M</a>
</div>

inside a div I have lots of a links that have an onclick event.. While the user clicks on a link button I would like the button to become and stays with black background color..If user clicks again the background turns from black to white.. I have also this code for onclick event:

$('#tab1 a').focus(function(){
            if ($(this).hasClass('kg-active-btn-size')) {
                $(this).removeClass("kg-active-btn-size").addClass("button w-button");
            }
            else {
                $(this).addClass("kg-active-btn-size");
            }
    });

So, the above code is adding a class to the specific a link tag. If clicks again remove this class.. This code works fine on Chrome, Firefox, but not on safari.. I have also tried 

$(this).toggleClass("kg-active-btn-size");

but still no luck.. I am using:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>

as an ajax library, cause my code has more than this piece of code.. Any help on that? Am I missing something? thanks in advance

Kiriakos Grhgoriadhs
  • 299
  • 2
  • 3
  • 22

1 Answers1

1

Not tested but try this. As example for a with id #shirt_1 - Alternative of object fake you can make var fake. But I prefer these object strings because the can be read everywhere.

var fake = {}
$('#shirt_1').on('click', function(){
        if (fake.fake == 'yes') {
        $('#shirt_1').css('background-color', 'black');
        fake.fake = 'no'
        }else{
        $('#shirt_1').css('background-color', 'white');
        fake.fake = 'yes'
        } 
});

Also why to use focus if you can use click. maybe is the problem focus. Also please always debug with console.log or alert at each new step to see how far you came.

t33n
  • 270
  • 1
  • 3
  • 17
  • thanks for your answer @t33n "focus" or "click" still the same results.. I am not getting any errors in console.. Furthermore, I noticed that addClass("..") does not work at all if I click on a button.. – Kiriakos Grhgoriadhs Jul 31 '17 at 23:18
  • did you use $(document).ready(function() {} at the beginng of your js scripts? make alert('1') at the entry of the click function. will alert come?. Also notice that I changed #tab1 a to #tab1. Please also add console.log or alert at the entry of if and else. Please tell me the result maybe I can help you then. – t33n Jul 31 '17 at 23:38
  • also change your html code. give every a tag a unique id or class. then you can exactly make click on this id/class. because you use #tab1 a and then you have 3 a tags. jquery didn´t know which of them do you mean. – t33n Jul 31 '17 at 23:42
  • Sorry I didn´t see that you had unique ids in your a tag. please make click on #shirt_1 – t33n Jul 31 '17 at 23:46
  • yes I have all my code to $(document).ready(function(){ ..}); I have also insert alerts inside if..else..I am getting the correct alerts but the whole system is not stable.. Sometimes, the button remains with white bg although I got the right alert with black bg.. Now I have this var fake = {} $('#tab1 a').on('click', function(){ if (fake.fake == 'yes') { alert('if'); $(this).removeClass("kg-active-btn-size").addClass("button w-button"); fake.fake = 'no' }else{ alert('else'); $(this).addClass("kg-active-btn-size"); fake.fake = 'yes' } }); – Kiriakos Grhgoriadhs Aug 01 '17 at 00:06
  • I am not sure it's right to use #shirt_1 cause I have 10 buttons inside this tab.. Inside another one I have 30 btns.. So, the code will be too long and not very human to read.. that is why I am using "this" but it is also not very helpful I guess.. – Kiriakos Grhgoriadhs Aug 01 '17 at 00:10
  • When you use #tab1 a and there are multiple a tags this cant be used. You have to do unique class/ids for everything you want to click on. Same for your default class kg-active-btn-size if you have multiple buttons with this class then it will be bugged. And please use my .css code. If you dont want to use .css because you want to work with it in your css files. Then maybe this help you. This is how I toogle class https://pastebin.com/r4vuru7A - Also it doesn´t need to be readable if it works with .css - Also if you make righrt naming like shirt1, shirt2 it´s easy to read with .css – t33n Aug 01 '17 at 00:34
  • And yeha I understand that you dont want to create single .css code for every button. But if it doesn´t work for you on safari with your default code from the beginning then you maybe need to search a other way to write your stuff. I had an same crazy bug on Opera. Every other Browsers worked except of opera. But Chrome and Safari should be same from viewing websites so really mystical why it only not working in safari. – t33n Aug 01 '17 at 00:39
  • I see your point.. Could somehow to grab dynamically the unique id of every a tag, in order to make a dynamic function and write the appropriate code in it? for example I click on #shirt_1 get this id, #shirt_2 grab this id and so on? – Kiriakos Grhgoriadhs Aug 01 '17 at 09:09
  • I found this code for that $("button").click(function() { alert(this.id); }); – Kiriakos Grhgoriadhs Aug 01 '17 at 10:44
  • thanks for taking time to answer that... Really a headache, but it's worth! Maybe I will optimize the code now! Furthermore, I have change a little bit of the code you gave me about the css.. I would also like to change not only the background, but the color too! cause the letters are black so I couldn't see anything.. Anyway, in case someone has this question too I used this: $('#shirt_1').css({ 'background-color': 'black', 'color' : 'white' }); inside if .. else statement.. – Kiriakos Grhgoriadhs Aug 01 '17 at 10:47