azmd108 azmd108 - 1 year ago 65
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


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

$('#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 () {
$( {

$('_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


the li-IDs are build like this:




the div-IDs are build like this




obviously test1_button refers to test1 and so on..


Answer Source

try this

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

instead of

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

will work to you.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download