I have 2 layers that i need to update individually if a user clicks on either of them.
我有2层,如果用户点击其中任何一个,我需要单独更新。
<div id=wrapper>
<div id=upvote>
//This div can be filled by upvote.php?id=X
<? echo getUpVote(); ?>
<a href=#><img src=upv.png></a>
</div>
<div id=downvote>
//This div can be filled by downvote.php?id=X
<? echo getdownVote(); ?>
<a href=#><img src=downv.png></a>
</div>
</div>
When the user clicks the up or down vote image, i need to fade out the contents of the div, make an ajax call to the respective php file (get request), and fade in the loaded content.
当用户点击向上或向下投票图像时,我需要淡出div的内容,对相应的php文件(获取请求)进行ajax调用,并淡入加载的内容。
How can i do this?
我怎样才能做到这一点?
3 个解决方案
#1
0
Attach a click handler to the anchor tags. Find which url to use given the id of the containing div, then invoke load to replace the contents of the wrapper. Fade out/in at the appropriate points. Make sure that you return false from the anchor click handler to cancel the default action.
将单击处理程序附加到锚标记。给定包含div的id的url,然后调用load来替换包装器的内容。在适当的点淡出/淡出。确保从锚点击处理程序返回false以取消默认操作。
$('#upvote,#downvote').find('a').click( function() {
var url = $(this).closest('div').attr('id') + '.php?id=X';
$('#wrapper').fadeOut();
.load( url, function() {
$('#wrapper').fadeIn();
});
return false; // cancel click action
});
#2
0
To add a click handler to an element in jQuery you can do this:
要在jQuery中为元素添加单击处理程序,您可以执行以下操作:
$("#upvote").click(clickHandler);
Where clickHandler is a function. Since you want to fade Out an image you can do this:
clickHandler是一个函数。由于您想要淡出图像,您可以这样做:
$("#upimg").hide('slow');
will cause an element with id='upimg' to disappear slowly. You can also use fadeTo(opacity) to achieve a similar effect.
会导致id ='upimg'的元素慢慢消失。您还可以使用fadeTo(不透明度)来实现类似的效果。
The AJAX call can be made with a call to load.
可以通过调用load来进行AJAX调用。
$('#div').load('url', {}, callback);
where an element with id='div' will be populated with the result of calling url, the {} is optional and callback is a function that you can include to execute after the load. The callback function may be used to fadeIn the new content.
其中id ='div'的元素将填充调用url的结果,{}是可选的,回调是一个可以包含在加载后执行的函数。回调函数可用于淡入新内容。
var clickHandler = function(){
$("#upimg").hide('slow');
$('#div').load('url', {}, callback);
}
var callback = function(){
$('#div').show('slow');
}
#3
0
AJAX request can be made with $.get and you can fade the DIV using jQuery's animation functions like fadeOut
可以使用$ .get进行AJAX请求,你可以使用jQuery的动画函数fadeOut淡化DIV
Here is some code on how you might acchive what you want:
以下是一些关于如何实现所需内容的代码:
$( '#IdOfOneAnchor' ).click ( function () {
var myDiv = $( '#IdOfYourDiv' );
myDiv.fadeOut ();
$.get (
'url/to/your/script.php',
{
// put params you need here
},
function ( response ) {
myDiv.html ( response ).fadeIn ();
}
);
return false;
} );
off course you will have to change the selectors to match your DIVs/links ...
当然,您必须更改选择器以匹配您的DIV /链接...
#1
0
Attach a click handler to the anchor tags. Find which url to use given the id of the containing div, then invoke load to replace the contents of the wrapper. Fade out/in at the appropriate points. Make sure that you return false from the anchor click handler to cancel the default action.
将单击处理程序附加到锚标记。给定包含div的id的url,然后调用load来替换包装器的内容。在适当的点淡出/淡出。确保从锚点击处理程序返回false以取消默认操作。
$('#upvote,#downvote').find('a').click( function() {
var url = $(this).closest('div').attr('id') + '.php?id=X';
$('#wrapper').fadeOut();
.load( url, function() {
$('#wrapper').fadeIn();
});
return false; // cancel click action
});
#2
0
To add a click handler to an element in jQuery you can do this:
要在jQuery中为元素添加单击处理程序,您可以执行以下操作:
$("#upvote").click(clickHandler);
Where clickHandler is a function. Since you want to fade Out an image you can do this:
clickHandler是一个函数。由于您想要淡出图像,您可以这样做:
$("#upimg").hide('slow');
will cause an element with id='upimg' to disappear slowly. You can also use fadeTo(opacity) to achieve a similar effect.
会导致id ='upimg'的元素慢慢消失。您还可以使用fadeTo(不透明度)来实现类似的效果。
The AJAX call can be made with a call to load.
可以通过调用load来进行AJAX调用。
$('#div').load('url', {}, callback);
where an element with id='div' will be populated with the result of calling url, the {} is optional and callback is a function that you can include to execute after the load. The callback function may be used to fadeIn the new content.
其中id ='div'的元素将填充调用url的结果,{}是可选的,回调是一个可以包含在加载后执行的函数。回调函数可用于淡入新内容。
var clickHandler = function(){
$("#upimg").hide('slow');
$('#div').load('url', {}, callback);
}
var callback = function(){
$('#div').show('slow');
}
#3
0
AJAX request can be made with $.get and you can fade the DIV using jQuery's animation functions like fadeOut
可以使用$ .get进行AJAX请求,你可以使用jQuery的动画函数fadeOut淡化DIV
Here is some code on how you might acchive what you want:
以下是一些关于如何实现所需内容的代码:
$( '#IdOfOneAnchor' ).click ( function () {
var myDiv = $( '#IdOfYourDiv' );
myDiv.fadeOut ();
$.get (
'url/to/your/script.php',
{
// put params you need here
},
function ( response ) {
myDiv.html ( response ).fadeIn ();
}
);
return false;
} );
off course you will have to change the selectors to match your DIVs/links ...
当然,您必须更改选择器以匹配您的DIV /链接...