Question

I have a jQuery script that manages a submenu. When the user clicks a div, the div changes to active and then the content changes color accordingly. The buttons have an id tag that is the same as the corresponding div tag, with ‘_button’ added. For example the div to change the color of has id tag ‘first’, then the buttons id tag is ‘first_button’.

The code I have now works fine for the buttons, but I’m not sure how to properly plug in the edited id tag to select the appropriate div to make red with the second jQuery call. Right now the code doesn’t do anything to the divs, but I don’t receive any errors in the console either. I could do it with a series of if/then statements, but that is rather inelegant.

$('.port_menu_button').click(function() {
    $('.port_menu_button').removeClass('active');
    $(this).addClass('active');;
    $('.port_type').css('color', '#000');
    $($(this).attr('id').replace('_button', '')).css('color', 'red'); //this is the problem line. how do I take the id and put it in here?
})

Answer 1

This should work for you:

var current_id = $(this).attr('id');
var other_id = current_id + '_button';

$('#' + other_id).css('color', 'red');