我正在为我的软件的朋友请求页面编写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);
});