azmd108 azmd108 - 5 months ago 8
jQuery Question

jQuery, which element is clicked (dynamic)?

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

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