指定特定类别的onclick

Question

Hi I have 2 classes which have an on click event on it, How can I target the event on click that would not affect the other class. Basically let's say I have two classes of scroller-right, I just want to affect the class that is being click.

This what I have so far

$('.scroller-right').click(function(e) {

  $('.scroller-left').fadeIn('slow');
  $('.scroller-right').fadeOut('slow');

  $('.tab-scroll').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){

  });
});

$('.scroller-left').click(function() {

  $('.scroller-right').fadeIn('slow');
  $('.scroller-left').fadeOut('slow');

    $('.tab-scroll').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){

    });
});    

Answer 1

try to use '$(this)' variable inside function liek below

$('.scroller-left').click(function() {

  $('.scroller-right').fadeIn('slow');
  $(this).fadeOut('slow');


});   

Answer 2

You correctly observed that you need a single function. As a result, we need to write a function which can handle both cases and add it as a handler for both.

function scrollerClick(e) {
    var isLeft = $(this).hasClass("scroller-left");
    $('.scroller-' + (isLeft ? "left" : "right")).fadeIn('slow');
    $('.scroller-' + (!isLeft ? "left" : "right")).fadeOut('slow');

    $('.tab-scroll').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){

    });
}

$('.scroller-right, .scroller-left').click(scrollerClick);