使2个特定的按钮淡出



我正在为我的软件的朋友请求页面编写jQuery脚本。这就是我现在的摇滚

    $(document).ready(function(){
    $('.acceptfriend').click(function(){
var self = this;
        $.ajax({
            url : 'inc/ajax.php',
            type : 'POST',
            data : {
                action : 'accept_friend',
                uid : $(this).data('uid')
            },
            dataType : 'JSON',
            success : function(result) {
                if (result.xhr == 'success') {
                    $( self ).fadeOut( 1000 );
                } else if (result.xhr == 'error'){
                    alert('An internal error accoured, try again later.');
            }
  }
    });
});
})
$(document).ready(function(){
    $('.rejectfriend').click(function(){
var self = this;
        $.ajax({
            url : 'inc/ajax.php',
            type : 'POST',
            data : {
                action : 'reject_friend',
                uid : $(this).data('uid')
            },
            dataType : 'JSON',
            success : function(result) {
                if (result.xhr == 'success') {
                    $( self ).fadeOut( 1000 );
                } else if (result.xhr == 'error'){
                    alert('An internal error accoured, try again later.');
            }
  }
    });
});
})

但问题是我想让接受和忽略按钮淡出,如果其中一个被点击,我不能使用他们的类名,因为如果我这样做,那么所有的按钮与该类在该页淡出。PS。我知道代码很乱,但这只是现在,我稍后会清理它。编辑下面是我在上面的jQuery中使用的HTML构成:

<div class="panel panel-default">
<div class="panel-body">
<a href="profile.php?id=12" class="tip" data-toggle="tooltip" data-placement="top" data-animation="true" data-original-title="anerikanarmyant"><img style="padding-bottom: 5px;" src="http://minecraft-websites.com/assets/images/default_profile_pic.jpg"width="48" height="48"></a>   anerikanarmyant
<div class="pull-right">
<div class="btn-group">
<button data-uid="12" type="button" class="btn btn-success acceptfriend">Accept</button>
<button data-uid="12" type="button" class="btn btn-danger rejectfriend">Ignore</button>
</div>
</div>
</div>
</div>

,此代码对接收到的每个朋友请求重复。

这是两种方法:

1。 http://jsfiddle.net/xWE3V/

$('.acceptfriend,.rejectfriend').click(function(){
    $(this).parent().fadeOut(500);
});

2。 http://jsfiddle.net/P6U76/

$('.acceptfriend').click(function(){
    $(this).siblings( ".rejectfriend" ).fadeOut(500);
    $(this).fadeOut(500);
});
$('.rejectfriend').click(function(){
    $(this).siblings( ".acceptfriend" ).fadeOut(500);
    $(this).fadeOut(500);
});

最新更新