jQuery on function（单击）仅影响一个类

Question

When the blue button is clicked it affects both buttons

http://jsfiddle.net/umbriel/Lwvukzhy/1/

My setup looks like this

var
    $window = $(window),
    $body = $('body'),
    $buttonRight = $('.button .right')
 ;

$buttonRight.on('click', function( ) {
    buttonReveal(  $( this ) );
});

function buttonReveal() {
    $buttonLeft.css({'width':'25%'});
    $buttonRight.css({'width':'75%'});
}

I want to to only affect one of buttons I clicked

Thank you

Answer 1

Use .siblings() to get siblings. Try this:

$buttonRight.on('click', function( ) {
    buttonReveal($(this)); //$(this) refers to current clicked element (button)
});
$buttonLeft.on('click', function() {
    buttonHide($(this));   //$(this) refers to current clicked element (button)
});


function buttonReveal(element) {
    element.siblings($buttonLeft).css({'width':'25%'}); //to apply css to siblings use .siblings()
    element.css({'width':'75%'});
}

function buttonHide(element) {
    element.css({'width':'0%'});
    element.siblings($buttonRight).css({'width':'100%'});
}

DEMO

Answer 2

You need to target the left/right buttons which is related to the clicked button. So you need to pass the clicked button to buttonReveal() and buttonHide() .

So

(function (window, $) {

    var
    $window = $(window),
        globalTimeout = null,
        $body = $('body'),
        $buttonRight = $('.button .right'),
        $buttonLeft = $('.button .left');


    $buttonRight.on('click', function () {
        buttonReveal(this);
    });
    $buttonLeft.on('click', function () {
        buttonHide(this);
    });


    function buttonReveal(button) {
        var $btn = $(button).css({
            'width': '75%'
        });
        $btn.prev('.left').css({
            'width': '25%'
        });
    }

    function buttonHide(button) {
        var $btn = $(button).css({
            'width': '0%'
        });
        $btn.next('.right').css({
            'width': '100%'
        });
    }

}(window, $));

Demo: Fiddle