Object-Oriented jQuery Question

Question

$("#e1").click(function() {
  $("#descriptions div").removeClass("show");
  $("#e1d").addClass("show");
});

$("#e2").click(function() {
  $("#descriptions div").removeClass("show");
  $("#e2d").addClass("show");
});


<div id="descriptions">

<div id="e1"></div>
<div id="e1d" class="description"></div>

<div id="e2"></div>
<div id="e2d" class="description"></div>

</div>

I'm trying to figure out a way to not to repeat the code and have jQuery automatically search and link the divs. So it'd be wonderful to link every id with the name e1~∞ to e1~∞d. Not sure how to implement the proper Object-Oriented methodology. Thank you for reading!

Object oriented is perhaps not what you're looking for. jQuery encourages a more functional approach. — cobbal
– cobbal, Commented Nov 12, 2009 at 18:31

MetroidFan2002 · Accepted Answer · 2009-11-12 19:17:50Z

7

Give your elements classes and then reference them in the jQuery via class name:

<div id="descriptions">

<div id="e1" class="trigger"></div>
<div id="e1d" class="description"></div>

<div id="e2" class="trigger"></div>
<div id="e2d" class="description"></div>

</div>


$(".trigger").click(function() {
      $('#descriptions>div').removeClass("show");
      $(this)
      .next("div.description")
      .addClass("show");
});

All that said, it looks like you are wanting to show/hide divs. You might want to look into jQuery's 'toggle' for that.

edited Nov 12, 2009 at 19:17

MetroidFan2002

30.1k16 gold badges66 silver badges82 bronze badges

answered Nov 12, 2009 at 18:30

DA.

40.8k51 gold badges162 silver badges219 bronze badges

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

1 Comment

Paul Over a year ago

There's an error in your code as clearly the removeClass("show") should refer to all the other elements instead of $(this)

Paul · Accepted Answer · 2009-11-12 18:28:20Z

3

Something like this may work:

$("id^='e'").click(function() {
    $("#descriptions div").removeClass("show");
    $("#" + $(this).attr("id") + "d").addClass("show");
});

The expression "id^='e'" selects all elements for which the id starts with e. So as you see e1 is not a very good name... Rather take something more descriptive.

But even stronger, if e refers to multiple elements, why don't you make a class name e like so?

<div id="descriptions">
    <div id="e1" class="e"></div>
    <div id="e1d" class="description"></div>

    <div id="e2" class="e"></div>
    <div id="e2d" class="description"></div>
</div>

jQuery is then easier to read and understand.

answered Nov 12, 2009 at 18:28

Paul

3,1523 gold badges20 silver badges19 bronze badges

3 Comments

Alex Bagnolini Over a year ago

I suggest using also $("#descriptions div.show").removeClass("show"); instead of $("#descriptions div").removeClass("show");

rmontagud Over a year ago

$(this) works directly, so you don't have to call the selector twice

cobbal Over a year ago

Making a class is indeed a better way to do it. When I see a string concatenation in a selector, I look for a way to restructure it more cleanly.

Marek Karbarz · Accepted Answer · 2009-11-12 18:29:43Z

0

You could use jQuery Regex Filter and use simple regex to bind the click event. Although I would go with different IDs that would make Paul's answer possible.

answered Nov 12, 2009 at 18:29

Marek Karbarz

29.4k6 gold badges55 silver badges73 bronze badges

Comments

GSto · Accepted Answer · 2009-11-12 18:29:46Z

0

you could define your function to the jQuery object to handle this.

$.fn.toggleShow = function(){
     $("#descriptions div").removeClass("show");
     $("#" + $(this).attr('id') + "d").addClass("show");  
}

$("#e1").click(function(){
     $(this).toggleShow();
});

answered Nov 12, 2009 at 18:29

GSto

42.5k37 gold badges136 silver badges188 bronze badges

Collectives™ on Stack Overflow

Object-Oriented jQuery Question

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related