Combine 2 functions to one in jQuery

Question

I've got a small jquery function that shows and hides depending on what's selected, I have 2 of these running on the same page, but each has its own data attached to the selection, I was wondering how I can tidy up the below function - would I create a variable for the #rearq / #rearw by finding out the id using the .attr function then using some sort of for each thing?

$('#rearw li a').click(function(ev){
        ev.preventDefault();
        var id = $(this).data('id');
        $('#rearw li a').not($(this).toggleClass('selected')).removeClass('selected');
        $('#rearw-tints li').not($('#'+id).toggleClass('shown')).removeClass('shown');
    });
    $('#rearq li a').click(function(ev){
        ev.preventDefault();
        var id = $(this).data('id');
        $('#rearq li a').not($(this).toggleClass('selected')).removeClass('selected');
        $('#rearq-tints li').not($('#'+id).toggleClass('shown')).removeClass('shown');
    });

This is what I have so far:

var control = $('.control ul').attr('id'); // Get the id e.g #rearw / #rearq

$(control).each(function (index) {
    $(control + ' li a').click(function (ev) {
        ev.preventDefault();
        var id = $(this).data('id');
        $(control + ' li a').not($(this).toggleClass('selected')).removeClass('selected');
        $(control + '-tints li').not($('#' + id).toggleClass('shown')).removeClass('shown');
    });
}  

Any help / pointers much appreciated!

Answer 1

You need the id selector # together with the id(control)

Change

$(control) 

to

$('#'+control);

Answer 2

Just change your code:

var control = $('.control ul').attr('id');

to this:

var control = '#' + $('.control ul').attr('id');

Also, you don't have to use the each loop here, as ID are supposed to be unique in DOM. Hence you can remove it and use the code like:

$(control + ' li a').click(function (ev) {
    ev.preventDefault();
    var id = $(this).data('id');
    $(control + ' li a').not($(this).toggleClass('selected')).removeClass('selected');
    $(control + '-tints li').not($('#' + id).toggleClass('shown')).removeClass('shown');
});

UPDATE

Your code

var control = $('.control ul').attr('id');

will give you one ID only, hence you can do this, same logic but bit modified:

$('.control ul').each(function () {
    var control = '#' + this.id;

    $(control + ' li a').click(function (ev) {
        ev.preventDefault();
        var id = $(this).data('id');
        $(control + ' li a').not($(this).toggleClass('selected')).removeClass('selected');
        $(control + '-tints li').not($('#' + id).toggleClass('shown')).removeClass('shown');
    });
});

Answer 3

$('#rearw li a, #rearq li a').click(function(ev){
    ev.preventDefault();
    var id = $(this).data('id'), 
        parent = $(this).closest('ul'), // assuming #rearw and #rearq are <ul> elements
        parentId = parent.attr('id'); // get 'rearw' or 'rearq'
    parent.find('a').not($(this).toggleClass('selected')).removeClass('selected');
    $('#' + parentId +'-tints li').not($('#'+id).toggleClass('shown')).removeClass('shown');
});

Answer 4

How about something along the lines:

$('#rearw li a, #rearq li a').click(function(ev){
     ev.preventDefault();
     var id = $(this).attr('id');
     $(this).closest('#rearw, #rearq').find('li a').not($(this).toggleClass('selected')).removeClass('selected');
     $(id + '-tints li').not($('#'+id).toggleClass('shown')).removeClass('shown');
});

Not sure if I made a mistakes converting, but the idea is there :)