CODEWITHSUNDEEP
javascriptjquery
Kiriakos Grhgoriadhs
Kiriakos Grhgoriadhs

Reputation: 319

jquery and/or javascript does not work on safari

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

Upvotes: 1

Views: 393

Answers (1)

t33n
t33n

Reputation: 390

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.

Upvotes: 1

Related Questions