使用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的內容，使一個AJAX調用相應的PHP文件（GET請求），並在加載的內容褪色。

我該怎麼做？

Answer 1

AJAX請求可以用$.get製成，並且可以使用像fadeOut

這裏jQuery的動畫功能褪色DIV是你會如何acchive你想要的一些代碼：

$('#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來替換wrapper的內容。淡出/在適當的點。確保您從錨定點擊處理程序返回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（不透明度）來達到類似的效果。

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

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

其中使用id =「DIV」的元件將與URL呼叫的結果來填充，{}是可選的回調是一個函數，則可以包括負載之後執行。回調函數可用於淡入新內容。

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

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

} 

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