單擊鏈接時使用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

可以使用$ .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 /鏈接...

Answer 2

將點擊處理程序附加到定位標記。 給定包含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 3

要將點擊處理程序添加到jQuery中的元素，您可以執行以下操作：

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

其中clickHandler是一個函數。 由於要淡出圖像，可以執行以下操作：

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

會使id ='upimg'的元素緩慢消失。 您也可以使用fadeTo（opacity）達到類似的效果。

可以通過加載調用進行AJAX調用。

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

其中id ='div'的元素將使用調用url的結果填充，{}是可選的，而callback是一個函數，您可以包括該函數以在加載后執行。 回調函數可用於淡入新內容。

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

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

 }

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