Question

I’ve got a litte js script which can change background images. You can address it by

$(document).ready(function(){ 
$("#test").click(function(){
   api.goTo(5); // this will call background slide no. 5
});
});
// this ahref will call the jQuery click handler and swap the background
<a href="javascript:;" id="test" name="test">Test</a>

And I need a way to tell the first script dynamically the page it has to swap to. The other script delivers a list structure this way:

<ul class="myclass" id="slider">
    <li jcarousel-page="1" class="active"><a href="javascript:void(0)"><span>1</span></a></li>
    <li jcarousel-page="2"><a href="javascript:void(0)"><span>2</span></a></li>
</ul>

What I finally try to get is, if you click on list item 2 for example, then the first script should be told “api.goTo(2)” to change to background 2…

I know there’s an event handler function in jQuery. But I don’t really get it how to pass by the number of the clicked list-item to the jQuery.click handler…

Thanks for helping!
Sebastian

Answer 1

$('li[jcarousel-page]').click(function() {
    api.goTo($(this).attr('jcarousel-page'));
});