Question

I’ve run into a wall with my limited JQuery knowledge,
I’m using a number of checkboxes:

    <input id="e_1" class="hiders" type="checkbox">
    <label for="e_1">Hide Element 1</label>

    <input id="e_2" class="hiders" type="checkbox">
    <label for="e_2">Hide Element 2</label>

    //Currently 6 of the above, with unique id's and shared class

I want to create a universal (and reusable function) to hide the related divs:

    <div id="e_1_div"> content </div>

    <div id="e_2_div"> content </div>

    //Currently 6 of the above, with unique id's and shared class

The following solution is what I am using currently (individual functions for each checkbox), and my limited knowledge tells me that it is horribly malformed, and probably drains a whole lot of unnecessary power as well.

    $('#e_1').change(function(){
       $('#e_1_div').toggle();
    });

    $('#e_2').change(function(){
       $('#e_2_div').toggle();
    });

So my question: Where do I start? Where can I get to know more about creating reusable functions for something like this?
Or if you really want to spoil me, what would be a possible solution, or a hint towards it?

Thank you for your time,
Dragan

Answer 1

You could target all of the elements at once by constructing a selector dynamically:

$('input[id^="e_"]').change(function() {
    $('#' + this.id + '_div').toggle();
});