Basic Slideshow plugin: scoping and multi-instantiation

[Mad_Griffith]

Hi, I am building an extremely basic jQuery Slideshow plugin (code below). I have two issues:

 

1) I have to duplicate variables because "click" creates a new scope. How do I pass arguments to the click function?

2) How can I make the plugin multi-instance with pure jQuery? Can I avoid JS classical/prototypal inheritance?

$('.article-previous').click(function(e) {var inner = $('.interaction-tab .inner');var article = $('.interaction-tab .inner article');var total_width = inner.width();var slide_width = article.width();if(inner.position().left < 0) { $('.interaction-tab .inner').css({ 'left' : '+=' + slide_width + 'px' });}e.stopPropagation();});$('.article-next').click(function(e) {var inner = $('.interaction-tab .inner');var article = $('.interaction-tab .inner article');var total_width = inner.width();var slide_width = article.width();var max_pos = total_width - slide_width;if(-inner.position().left < max_pos) {$('.interaction-tab .inner').css({ 'left' : '-=' + slide_width + 'px' });}e.stopPropagation();});

Thanks

Edited September 21, 2015 by Mad_Griffith

[Ingolme]

You could have a single function for both events:

$('.article-previous').click(articleButton);$('.article-next').click(articleButton);function articleButton(e) {  var inner = $('.interaction-tab .inner');  var article = $('.interaction-tab .inner article');  var total_width = inner.width();  var slide_width = article.width();  var max_pos = total_width - slide_width;  var element = $(this);  if(element.hasClass('article-previous') && inner.position().left < 0) {     inner.css({ 'left' : '+=' + slide_width + 'px' });  }  if(element.hasClass('article-next') && -inner.position().left < max_pos) {    inner.css({ 'left' : '-=' + slide_width + 'px' });  }  e.stopPropagation();}

[justsomeguy]

1) I have to duplicate variables because "click" creates a new scope. How do I pass arguments to the click function?

It looks like you can use Function.bind in recent browsers to create a copy of the function that gets passed specific parameters:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bindThere's a polyfill for a Function.createDelegate method that you could also use, which I stole from ExtJS/Sencha:http://w3schools.invisionzone.com/index.php?showtopic=33082#entry181427I don't think that jQuery has ever added something like that, where you can create a copy of a function that runs in a specific scope and automatically gets passed certain parameters, in addition to any others that get passed when it is actually called.

How can I make the plugin multi-instance with pure jQuery?

"Pure jQuery" is a strange term. You realize that jQuery is written using Javascript, right? It's not a new language or anything, it's a Javascript program.

Can I avoid JS classical/prototypal inheritance?

Not even you're using jQuery, because that's how jQuery works.

[Mad_Griffith]

Thanks to both of you.

 

Concerning the inheritance, can I use $.each()?

 

@justsomeguy: I meant to say "a built-in pattern in jQuery, without relying on JS"