0

私のウェブサイトにいくつかの画像があります。クリックすると" .TutorialsSlideDown"divが表示され、同時に" .tutorial_listing"divが非表示になります。これらの画像にデータ属性を追加し、クリックされた画像を確認し、それに応じて「.TutorialsSlideDown」divにデータベースのデータを入力します。

これはこのように行うことができますか？どのように？そうでない場合、最善の方法は何ですか？

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;
    }
4

1 に答える 1

3
  1. データベース内のチュートリアルの ID を持つ関数に変数を追加します。
  2. get/post を処理して ID を取得できるサーバー側スクリプトへの ajax 呼び出しを行います。
  3. データベースにクエリを実行し、必要な情報を取得します
  4. データを返し、jQuery でページに埋め込む

あなたのためにコード全体を書く意味はあまりないと思います。これは、あなたを正しい方向に導くガイドです。他にご不明な点がございましたら、お問い合わせください。

ここでjQuery ajaxについて読むことができます：

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

于 2013-02-27T10:36:08.647 に答える