单击链接时使用 jquery/ajax 发送/更新 div

Question

如果用户点击其中任何一个，我需要单独更新 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>

当用户点击赞成或反对投票图像时，我需要淡出 div 的内容，对相应的 php 文件进行 ajax 调用（获取请求），并淡入加载的内容。

我该怎么做？

Answer 1

将点击处理程序附加到锚标记。在给定包含 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
});

Answer 2

要在 jQuery 中为元素添加点击处理程序，您可以这样做：

 $("#upvote").click(clickHandler);

其中 clickHandler 是一个函数。由于您想淡出图像，您可以这样做：

 $("#upimg").hide('slow');

会导致 id='upimg' 的元素慢慢消失。您也可以使用 fadeTo(opacity) 来实现类似的效果。

可以通过调用 load 来进行 AJAX 调用。

$('#div').load('url', {}, callback);

其中 id='div' 的元素将填充调用 url 的结果，{} 是可选的，回调是您可以包含在加载后执行的函数。回调函数可用于淡入新内容。

 var clickHandler = function(){
    $("#upimg").hide('slow');

    $('#div').load('url', {}, callback);

 }

 var callback = function(){
    $('#div').show('slow');
 }

Answer 3

可以使用$.get 发出AJAX 请求，您可以使用jQuery 的动画功能（如fadeOut）淡化DIV

以下是一些关于如何获得所需内容的代码：

$( '#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;
} );

当然，您必须更改选择器以匹配您的 DIV/链接...