0

我正在努力完成对您来说可能很简单的任务。我想要它，所以每次用户单击左侧栏上的一个“患者”时，都会打开一个抽屉。该抽屉将加载到页面上的隐藏 div (display:none) 中。每个 div 的 id 将是患者的姓氏。显然，我包含的小提琴仅出于演示目的而显示所有相同的姓氏。

但问题是我不知道如何为每个病人打开一个独特的抽屉。我想我需要以某种方式在每个患者的 li 上设置一个开关？

此外，如果他们单击列表中的另一位患者，我希望关闭当前打开的抽屉，并打开他们刚刚单击的那个。此外，如果单击关闭按钮，显然也会关闭抽屉。

我有一个抽屉可以处理这个：

 $(".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

在您的 HTML 中添加一个数据元素来指示 ID，在这种情况下假设为患者 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 回答