Javascript Ng使用“单击”重复显示/隐藏未正常工作

这是我使用的指令，有一个从JSON动态生成的名称列表。当你点击一个名字时，它会显示/隐藏一个包含该名字更多信息的窗口。相反，它显示/隐藏列表中每个名称的每个窗口。我希望它只显示/隐藏我单击的窗口

JS:

HTML:

{{task.title}}
说明：
{{task.description}

您正在侦听的
元素
单击事件本身就是指令本身，因此每次您单击指令内的某个内容时，每个
都将执行toggleClass

因此，您不应该在（“单击”、…
上执行
element.find（“tbody.task-tbody tr”）。而应该在（“单击”、…
上执行
element.find

如果您只想用#f8f8背景切换
的可见性，我建议您添加一个类以更容易地定位它

[编辑]
您的链接功能将是：

function(scope, element) {
  element.find("tbody.task-tbody tr").on("click", function() {
    this.toggleClass("hidden"); 
  });
}

您正在侦听的
元素
单击事件本身就是指令本身，因此每次单击指令内的某个内容时，每个
都将执行toggleClass

因此，您不应该在（“单击”、…
上执行
element.find（“tbody.task-tbody tr”）。而应该在（“单击”、…
上执行
element.find

如果您只想用#f8f8背景切换
的可见性，我建议您添加一个类以更容易地定位它

[编辑]
您的链接功能将是：

function(scope, element) {
  element.find("tbody.task-tbody tr").on("click", function() {
    this.toggleClass("hidden"); 
  });
}

在
angular.element（“tbody.task-tbody tr”）
中有错误的查询，必须指定要显示的tr

例如，首先隐藏所有tr，然后仅显示一个具有特定ID的tr

angular.element("tbody.task-tbody tr").addClass('hidden');
angular.element("#task_8").removeClass('hidden');

在模板中指定任务id：

<tr id="task_{{task.id}}">

您在
angular.element（“tbody.task-tbody tr”）中有错误的查询。
您必须指定要显示的tr

例如，首先隐藏所有tr，然后仅显示一个具有特定ID的tr

angular.element("tbody.task-tbody tr").addClass('hidden');
angular.element("#task_8").removeClass('hidden');

在模板中指定任务id：

<tr id="task_{{task.id}}">

没有HTML很难确定，但我相信您的问题是
angular.element（“tbody.task-tbody tr”）.toggleClass（“hidden”）；

angular.element（document）
给jQuery函数取别名（）。在这种情况下，它给选择器取别名并选择
“tbody.task-tbody tr”
中的所有行。因此，当调用
.toggleClass（“hidden”）
时，jQuery将“hidden”类应用于所有这些元素

如果您只想隐藏已单击的元素，则可以使用指令中提供的元素引用将“隐藏”专门应用于该元素

例如：


app.directive（“任务列表”，函数（）{
返回{
限制：'E'，
templateUrl:“/templates/elements/tasklisting.html”，
作用域：{}，
链接：函数（范围、元素、属性、$sce）{
元素上（“单击”，函数（）{
//使用元素而不是“angular.element”
元素。切换类（“隐藏”）；
});
}
}
})没有HTML很难确定，但我相信你的问题是
angular.element（“tbody.task-tbody tr”）.toggleClass（“hidden”）；

angular.element（document）
给jQuery函数取别名（）。在这种情况下，它给选择器取别名并选择
“tbody.task-tbody tr”
中的所有行。因此，当调用
.toggleClass（“hidden”）
时，jQuery将“hidden”类应用于所有这些元素

如果您只想隐藏已单击的元素，则可以使用指令中提供的元素引用将“隐藏”专门应用于该元素

例如：


app.directive（“任务列表”，函数（）{
返回{
限制：'E'，
templateUrl:“/templates/elements/tasklisting.html”，
作用域：{}，
链接：函数（范围、元素、属性、$sce）{
元素上（“单击”，函数（）{
//使用元素而不是“angular.element”
元素。切换类（“隐藏”）；
});
}
}
})
你能提供html吗？你可以切换每个tr元素。你可能想切换“element”变量（或它的某个子/父变量）上的class。Angular.element！=element@Rob我添加了HTML@Noppey我正在切换“你能提供html吗？”切换每个tr元素。你可能想切换“元素”变量上的类（或它的某个孩子/家长）.Angular.element！=element@Rob我添加了HTML@Noppey我正在切换属性，您的方法将产生与op相同的结果。您将最终找到所有
tr
元素。您是对的，我忘了在处理程序中，您必须使用
this
来引用单击的元素，而不是
angular.element…
=>
>this.toggleClass（“隐藏”）
。您的方法将产生与op相同的结果。您将最终找到所有
tr
元素。您是对的，我忘了在处理程序中说，您必须使用
this
来引用单击的元素，而不是
angular.element…
this.toggleClass（“隐藏”）
。