javascript - jQuery on 函数(点击)只影响一个类

Question

单击蓝色按钮时，它会影响两个按钮

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

我的设置如下

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

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

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

我只想影响我点击的按钮之一

谢谢

Answer 1

使用.siblings()为了得到 sibling 。试试这个:

$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