Question

我正在努力完成对你来说可能是一项简单的任务。每当用户点击其中一位患者时，我都希望如此。在左侧的酒吧，抽屉打开。该抽屉将加载到页面上的隐藏div（显示：无）中。每个div的id将是患者的最后姓氏。我所包含的小提琴显示所有相同的姓氏，仅用于演示目的。显然。

但问题是我不知道如何为每位患者打开一个独特的抽屉。我想我需要以某种方式对每个病人进行一次切换？

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

我有一个抽屉可以使用它：

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

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

            });

但很明显，这不会起作用...... :(

在小提琴中它打开一个标准的抽屉＆＃34;马上。但我真的希望每个命名div的数据都以相同的形式加载。如果您不理解，请发表评论。

这是小提琴：

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

Answer 1

检查这个小提琴更新....

代码中的更改

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

JSFIDDLE

Answer 2

在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/

JQuery打开/关闭独特的抽屉

2 个答案: