/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] hasClass/removeClass bug

Copy linkTweet thisAlerts:
Sep 12.2011

Hi all

I have a link as such:

[CODE]<a onclick=”setSubTagStatus(1, ‘myString’)”>My Link</a>[/CODE]

And I have the JS function as such:

[CODE]
function setSubTagStatus(tagid, tagstring) {
$(“#subtagbox_”+tagstring+”> a”).click(function() {
if ($(this).hasClass(‘active’)) {
$(this).removeClass(“active”);
} else {
$(this).addClass(“active”);
}
});
}

[/CODE]

In a nutshell, I need to set add/remove a class called ‘active’ to/from a link that is clicked within a DIV.

So if the link has the class ‘active’ already assigned I need to remove it and vice versa however the issue I am having is that I have to [B]double click[/B] the link in order for it to work!!

Any ideas why double clicking works but single clicking doesn’t?

Thanks for reading.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Jeff_MottSep 12.2011 — You'll have to show us the markup for the active/inactive link, that you select using [font=courier]#subtagbox_myString > a[/font].

Or, even better, provide a link to the page itself.
Copy linkTweet thisAlerts:
@kbc1authorSep 12.2011 — Hi Jeff

Thanks for the response.

My page is still in development mode locally so all I can do is give you my source code.

Below shows the parent hyperlink (Primary) and its associated children hyperlinks inside the subtagbox_Primary DIV.

I need the setSubTagStatus() function to simply ADD/REMOVE the 'active' class to and from the children link classes if they are clicked.

[CODE]
<a onclick="setTagStatus(7, 'tblfilms', 2, 'Primary', '1')" class="tagitem active" id="tag_2" title="Primary">Primary</a>
<div id='subtagbox_Primary'>
<a onclick="setSubTagStatus('5', 'Primary');" class="subtagitem" id="subtag_5" title="Age 5-7">Age 5-7</a>
<a onclick="setSubTagStatus('7', 'Primary');" class="subtagitem" id="subtag_7" title="Age 7-11">Age 7-11</a>
<a onclick="setSubTagStatus('8', 'Primary');" class="subtagitem" id="subtag_8" title="Age 10-13">Age 10-13</a>
</div>
[/CODE]

For some reason it only works if I quickly double click the links but i'm guessing thats because I have written the JS function incorrectly?

Any advice or idea of how ot re-write the JS function better would be greatly appreciated.

Regards

Kris
Copy linkTweet thisAlerts:
@Jeff_MottSep 12.2011 — In your setTagStatus function, you're assigning a click event that toggles the active class. setTagStatus is already called onclick, so it seems to me that you want to do away with the jQuery click handler, and just toggle the active class right then and there.
Copy linkTweet thisAlerts:
@kbc1authorSep 12.2011 — Could I ask you to provide an example of how you would do it Jeff?
Copy linkTweet thisAlerts:
@Jeff_MottSep 12.2011 — function setSubTagStatus(tagid, tagstring) {
$("#subtagbox_"+tagstring+"&gt; a").toggleClass("active");
}
Copy linkTweet thisAlerts:
@kbc1authorSep 12.2011 — Cheers Jeff - your solution is appreciated.
×

Success!

Help @kbc1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...