Search jQuery

jQuery Forum

simple toggleClass problem

in Getting Started • 11 years ago

I have an "Edit" button with id="edit" and a "Preview" button with id="preview". The page initially loads with the "Edit" button visible and the "Preview" button hidden. By clicking these buttons you toggle between the two and add or remove a .hideable class to all li on the page. This is working fine.

It's the last function below that's not working as expected. The idea here is to be able to grey out any li that has the new .hideable class. However, when I click on a li nothing happens. I know the li has the .hideable class because the :hover css is working.

Any help would greatly be appreciated. Thanks.

<script type="text/javascript">
$(function() {
$("#edit").click(function() {
$(this).hide();
$("#preview").show();
$("#page li").addClass("hideable");
});
});
$(function() {
$("#preview").click(function() {
$(this).hide();
$("#edit").show();
$("#page li").removeClass("hideable");
});
});
$(function() {
$(".hideable").click(function() {
$(this).toggleClass("grey");
});
});
</script>

#container #content #page .hideable:hover {
background-color: #CCC;
cursor: pointer;
}
.grey {
background-color: #CCC;
}

Replies(7)

jQuery_be..

Re: simple toggleClass problem

11 years ago

Hi reiger:

the selector in your toggleClass function is a class. This means you need to pas in the event so the function knows which element with .hiedable you are talking about.

Try this:

$(".hideable").click(function(e) {
$(e.target).toggleClass("grey");
});

Hope this helps!

reiger101

Re: simple toggleClass problem

11 years ago

I'm fairly new to javascript and jQuery so please excuse my ignorance...

I thought my selector $(".hideable") would select all the #page.li to which I assigned the .hideable class in the 1st function above. I'm a little unsure as to what e and e.target are and what they are doing / why they are required. Could you expand on you explaination a bit. Thanks so much.

jQuery_be..

Re: Re: simple toggleClass problem

11 years ago

sure =),

Yes $('.hideable') selects all elements with class="hideable" and puts them in a sort of array.

when you say $(this) your basically talking to an array object BUT you want to address the elements inside correct?

So you have to pass in "e" short for event(you could give it any name its a variable).

the "e" (event) is an object with tons and tons of stuff in it. One of those it "target" and it is referring to the element you clicked.

so in English it is the event target. That's your selector to the clicked element!

Hope this answered your question!

reiger101

Re: simple toggleClass problem

11 years ago

Thanks for that explanation.

I've changed my function just as you suggested (see code below), but there's no change to the behavior in the browser. Thoughts / ideas?

$(function() {
$(".hideable").click(function(e) {
$(e.target).toggleClass("grey");
});
});

jQuery_be..

Re: Re: simple toggleClass problem

11 years ago

ohh yes my bad, write it like this:

$(function() {
$(".hideable").live('click', function(e) {
$(e.target).toggleClass("grey");
});
});

Kevin B

Re: simple toggleClass problem

11 years ago

i think using $(this).toggleClass("grey") would be the correct code to use there. However, i believe the problem is that the hideable class is being added to the li's after domReady

Try this instead:

$(".hideable").live("click",function(){
$(this).toggleClass("grey");
});
$(function() {
$("#edit").click(function() {
$(this).hide();
$("#preview").show();
$("#page li").addClass("hideable");
});
$("#preview").click(function() {
$(this).hide();
$("#edit").show();
$("#page li").removeClass("hideable grey");
});
});

Edit: fixed typo.

-- Kevin

reiger101

Re: simple toggleClass problem

11 years ago

Brilliant me2loveit2! Your latest reply works beautifully. Now I just need to study up on the live() function. Thanks you so much.

- Patrick

Top Reply

Response title

Attachments

jQuery Forum

simple toggleClass problem

Replies(7)

Re: simple toggleClass problem

Re: simple toggleClass problem

Re: Re: simple toggleClass problem

Re: simple toggleClass problem

Re: Re: simple toggleClass problem

Re: simple toggleClass problem

Re: simple toggleClass problem

Statistics

Tags

Actions

Related Posts