2013-02-27 70 views
0

我的網站上有一些圖片,點擊時顯示「.TutorialsSlideDown」div,同時隱藏「.tutorial_listing」div。我想向這些圖像添加數據屬性,然後檢查哪個被點擊,並根據數據庫中的數據填充「.TutorialsSlideDown」div。jQuery - 動態添加數據值並從數據庫檢索數據

這可以這樣做嗎?怎麼樣?如果不是,最好的方法是什麼?

HTML:

<div class="tutorial_listing"> 
     <img id="PhpTutorials" src="~/Images/PHP.png" width="150px" height="150px" alt="PHP Tutorialok"/> 
     <img id="AspdotNetWPTutorials" src="~/Images/ASPdotNet.png" width="150px" height="150px" alt="ASP.NET Tutorialok"/> 
    </div> 
    <div class="tutorial_listing"><h3>Programozás</h3></div> 
    <div class="TutorialsSlideDown"></div> 

的jQuery:

$('#PhpTutorials').click(function() { openTutorials("PHP Tutorialok. <a class='GoBack'>Vissza</a>") }); 
    $('#AspdotNetWPTutorials').click(function() { openTutorials("ASP.NET Web Pages Tutorialok. <a class='GoBack'>Vissza</a>") }); 

    function openTutorials(title) { 

     $('.tutorial_listing').slideUp(400); 
     $('.TutorialsSlideDown').slideDown(400); 
     $('#PageTitle').html(title); 
     $('.GoBack').bind('click', function() { 
      $('.TutorialsSlideDown').slideUp(400); 
      $('.tutorial_listing').slideDown(400); 
      $('#PageTitle').html("Tutorialok"); 
     }); 

     return false; 
    } 

回答

3
  1. 添加一個額外的變量,其具有本教程的ID在數據庫中的函數
  2. ,從AJAX請求到服務器端腳本,可以處理get/post並獲取ID
  3. 查詢數據庫和g等你的信息要
  4. 返回數據,並使用jQuery

我不認爲有多大的意義寫完整代碼,你將其嵌入到頁面中。這是一個指導,應該把你推向正確的方向。如果您有任何其他問題,請告訴我。

您可以閱讀有關jQuery的AJAX在這裏:

http://api.jquery.com/jQuery.ajax/

+1

提示:提供外部鏈接;) – Vogel612 2013-02-27 10:37:04

+0

@ Vogel612你的意思是使用教程和/或鏈接到jQuery的AJAX頁面的網站? – James 2013-02-27 10:37:48

+0

最好是我猜,但通常jquery.ajax頁面就足夠了:) – Vogel612 2013-02-27 10:39:41