jQuery, which element is clicked (dynamic)?

Question

so im pretty new to jQuery.

What im trying to do:

Whenever a user is clicking an element within my ul, i want the ID of that listelement and run a function. the li's are called like the div's with a aditional _button tag. eg.

div id="test1"

li id="test1_button"

The current showed div-box should slide out left, the li-element, which refers to another div, should slide in right.

this is what i have so far:

function SH_GET_DIV() {
   $('nav ul li').each(function(){

         var SH_MENU_ELEMENTS=String($(this).attr('id'));
         var SH_BUTTONS=SH_MENU_ELEMENTS.indexOf('_button');

         if( SH_BUTTONS >= 0 ) {
            var SH_MENU_CLEARED_STRING = SH_MENU_ELEMENTS.replace('_button','');
            if( $('#'+SH_MENU_CLEARED_STRING).css('display') == 'block') {

            $('#'+SH_MENU_CLEARED_STRING).hide('slide', {direction: 'left'}, 500);

            } 
         }
         });

}

The function gives me the box which is currently showed, so that the script nows, which box has to slide out. This works

also i have this, works

example:

$('#sh_test1_button').click(function() {
      SH_GET_DIV();

      $('#sh_test').show('slide', {direction: 'right'}, 400);

});

This is pretty static, so im trying to build this a bit more dynamic.

So far i have this:

$(document).on('click', 'nav ul li', function () {
    $(this.id).click(function() {
      SH_GET_DIV();

      $(this.id.replace('_button','')).show('slide', {direction: 'right'}, 400);

});
});

But nothing happens when i click a li-Element.

So my question is:

How can i build this dynamically. I want to know which li-Element was clicked, start the SH_GET_DIV() function, and let the div, which refers to the li-Element, slide in from the right

Again:

the li-IDs are build like this:

test1_button

test2_button

...

the div-IDs are build like this

test1

test2

...

obviously test1_button refers to test1 and so on..

Thanks!

Answer 1

try this

$('#'+$(this).attr("id").replace('_button','')).show('slide', {direction: 'right'}, 400);

instead of

$(this.id.replace('_button','')).show('slide', {direction: 'right'}, 400);

will work to you.

Thanks

Answer 2

try to get the ID using the below code:

$(this).attr("id")

instead of

$(this.id)