Javascript/jQuery: Is there a better way to acomplish this in Javascript?

Question

I have this code:

$(document).ready(function() { //Document Ready

$(".examples .example1").click(function() {

    $(".examples .example1 div").fadeToggle("slow");
    $(".examples .example1").toggleClass('focused');

});


$(".examples .example2").click(function() {

    $(".examples .example2 div").fadeToggle("slow");
    $(".examples .example2").toggleClass('focused');

});


$(".examples .example3").click(function() {

    $(".examples .example3 div").fadeToggle("slow");
    $(".examples .example3").toggleClass('focused');


});

}); // End

This just basically duplicates the same thing on 3 (only 2 in the example below) different elements- Click, Toggle a div, and toggle a class.

Working code here (Ugly and not as It appears in the site- lacking other css/less and images)

This works perfectly, but the (very small) JS person within me says that there must be a cleaner way of doing the same thing? Seems too repetitive and ugly.

Could anyone help to make this better code? (and hence me a better coder if I learn)

Your demo shows only one element with each examplesX class. Are there more than one for each? — user2437417
– user2437417, Commented Jun 17, 2013 at 15:09
@epascarello Yes there is, but as I hadn't added a 3rd span in the HTML, then I hadn't noticed the issue. Tahnks for the pointing out. — harley_woop
– harley_woop, Commented Jun 17, 2013 at 15:25

epascarello · Accepted Answer · 2013-06-17 15:09:54Z

3

Use a common class on all of the elements. You can than use this to reference the element that was clicked on.

$(".examples>span").click(function() {   
    $(this).toggleClass('focused').find("div").fadeToggle("slow");    
});

answered Jun 17, 2013 at 15:09

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

bwoebi Over a year ago

I didn't downvote, but look at the question: $(".examples .example3") takes effect on $(".examples .example2 div") (and not on $(".examples .example3 div")).

user2437417 Over a year ago

@bwoebi: I'd bet that's a copy error when creating the code example.

harley_woop Over a year ago

@epascarello I didn't downvote, but I added a different class- "NOTOGGLE" nad it ws still toggled when I clicked on it?

epascarello Over a year ago

What do you mean NOTOGGLE? You lost me. And please answer my question about the typo under the main question so it clears up your question for other people.

user2437417 Over a year ago

@harley: Your markup is invalid, and one of your p elements is missing its / in the closing tag.

|

ayyp · Accepted Answer · 2013-06-17 15:12:25Z

1

$(document).ready(function() { //Document Ready
   $('.examples > span[class^="example"]').click(function() {
      $(this).toggleClass('focused').children('div').fadeToggle('slow');
   });
}); // End

This will target a span child if .examples with a class name that begins with example. It will the toggle the focused class on this element before moving on the find the child div and toggling slow on it.

Codepen link: http://codepen.io/anon/pen/DBHFy

answered Jun 17, 2013 at 15:12

ayyp

6,5984 gold badges35 silver badges47 bronze badges

Collectives™ on Stack Overflow

Javascript/jQuery: Is there a better way to acomplish this in Javascript?

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related