0

私はあなたにとって簡単な仕事かもしれないことを成し遂げようとしています。ユーザーが左側のバーの「患者」のいずれかをクリックするたびに、引き出しが開くようにしたいのです。その引き出しは、ページの非表示の div (display:none) に読み込まれます。各 div の ID は、患者の姓になります。私の含まれているフィドルは、明らかに、デモンストレーションの目的でのみ、すべて同じ姓を示しています。

しかし問題は、患者ごとに固有の引き出しを開く方法がわからないことです。どうにかして、各患者の李にトグルを付ける必要があると思いますか?

また、リスト内の別の患者をクリックすると、現在開いている引き出しが閉じて、クリックしたばかりの引き出しが開きます。また、閉じるボタンをクリックすると、当然ドロワーも閉じます。

私はこれで動作する単一の引き出しを手に入れました：

 $(".patient").toggle(function(){
            $(this)
                $('#drawer').slideDown("slow")

            }, function(){
                $(this)
                $('#drawer').slideUp("slow")    

            });

しかし、明らかにそれはうまくいきません... :(

フィドルでは、現在標準の「引き出し」を開いています。しかし、実際には、名前付きの各 div のデータを同じ形式でロードしたいと考えています。わからないことがあればコメントください。

フィドルは次のとおりです。

http://jsfiddle.net/3veht/1/

4

2 に答える 2

0

このフィドルが更新されたことを確認してください....

コードで行われた変更

 var divud = $(this).text().split(' ')[1];
                $('#drawer').slideDown("slow");
                $('#'+divud).removeClass('hidden');
              $('#'+divud).slideDown("slow");

JSFIDDLE

于 2013-01-23T03:55:19.123 に答える
0

ID を示すデータ要素を HTML に追加します。この場合は患者 ID としましょう。

<li class="patient green" data-patientId="1">Josh Doe<img src="img/next.png"><img class="imgfix" src="img/accept.png"></li>
<li class="patient red" data-patientId="2">John Adams<img src="img/next.png"><img class="imgfix" src="img/cancel.png"></li>

次に、データをロードするときに JavaScript で、その ID を使用してページ リクエストを生成できます。また、トグルをクリックに変更し、前のものを上にスライドさせてから、新しいものを下にスライドさせました. フィドルの例では： 

 $(".patient").click(function(){
     var pat = $(this);
     if ($("#drawer").is(":visible"))
         $("#drawer").slideUp("fast", function () {

            $('#drawer').slideDown("slow")
            $("#drawer").load("/echo/js?js=" + pat.data("patientid"));       
         });
     else   
     {
         $('#drawer').slideDown("slow")
         $("#drawer").load("/echo/js?js=" + pat.data("patientid"));
     }
 });

更新されたフィドル: http://jsfiddle.net/3veht/6/

于 2013-01-23T03:57:45.353 に答える