How to get ID of clicked element with jQuery
JqueryJquery CycleJquery Problem Overview
I have the following html:
<a href="#" id="#1" class="pagerlink" >link</a>
<a href="#" id="#3" class="pagerlink" >link</a>
<a href="#" id="#2" class="pagerlink" >link</a>
/*etc.... */
and the following jQuery script:
$(document).ready(function() {
var $container = $('.gallery_r').cycle({
fx: 'scrollHorz',
speed: 500,
timeout: 0
});
$('a.pagerlink').click(function() {
var id = $(this).attr('id');
$container.cycle(id);
return false;
});
});
the 'pagerlink' links control are to jQuery Cycle slideshow. If I swap this line:
$container.cycle(id);
for this
$container.cycle(7);
it works... (obviously only navigating to slide number 7). So, my question is how can I pick up the ID of the link being clicked and pass it into that line?
Thanks in advance!
Jquery Solutions
Solution 1 - Jquery
Your IDs are #1
, and cycle
just wants a number passed to it. You need to remove the #
before calling cycle
.
$('a.pagerlink').click(function() {
var id = $(this).attr('id');
$container.cycle(id.replace('#', ''));
return false;
});
Also, IDs shouldn't contain the #
character, it's invalid (numeric IDs are also invalid). I suggest changing the ID to something like pager_1
.
<a href="#" id="pager_1" class="pagerlink" >link</a>
$('a.pagerlink').click(function() {
var id = $(this).attr('id');
$container.cycle(id.replace('pager_', ''));
return false;
});
Solution 2 - Jquery
You just need to remove the hash from the beginning:
$('a.pagerlink').click(function() {
var id = $(this).attr('id').substring(1);
$container.cycle(id);
return false;
});
Solution 3 - Jquery
@Adam Just add a function using onClick="getId()"
function getId(){console.log(this.event.target.id)}
Solution 4 - Jquery
Your id will be passed through as #1, #2 etc. However, # is not valid as an ID (CSS selectors prefix IDs with #).
Solution 5 - Jquery
First off you can't have just a number for your id unless you are using the HTML5 DOCTYPE. Secondly, you need to either remove the # in each id or replace it with this:
$container.cycle(id.replace('#',''));