javascript - 隐藏CSS类delete_icon与引用/使用按钮值

Question

模板.html

 <td style="width:150px;"><input type="button" name="delete"  value="{{ report_person.report_person.id}}" class="delete_icon" />{{report_person.report_person.name }}
 </td>

上面的行是使用 python/django 动态创建的。它是人名和删除图标。 对于动态创建的每一行，都会出现删除图标。

<td class="ir-shade" colspan="4"><button id="{{report_person.report_person.id}}" type="button" class="add_treatment" class="button_style">Add treatment notes</button>
<div id="result-{{report_person.report_person.id}}"  class="toggle"></div></td>

添加治疗备注是一个切换按钮，它在一个切换按钮上显示治疗详细信息，在此状态下按钮的名称变为隐藏治疗备注。

我想在治疗注释打开时隐藏个人姓名的delete_icon类。因为我使用comman css类作为delete_icon，所以使用这个$('.delete_icon').hide(); 隐藏动态创建的所有行的删除图标。唯一唯一的事情是删除按钮的值，这意味着 delete_icon。是否有可能隐藏引用值的 css 类图标。以便删除图像仅当处理笔记处于打开状态时才会隐藏。

注意:这是一些django代码用于传递变量，看起来与html不同。

Answer 1

在 jQuery 中，您可以使用 this查找child elements 。假设这一切都在一个 div、或 span 或某种容器中。您可以简单地从该容器向下搜索并关闭删除按钮。

$(this).children("input.delete_icon").hide();

脱离您提供的模板，您将使用子项以及 .prev()向上导航 DOM，然后向下导航。

您的代码大致如下:

$(this).closest('tr').prev().children(":first").children('input.delete_icon').hide();

让我们来看看这个:

• $(this)是您当前“点击”的表格行，其中包括您的 add_treatment按钮。
• .closest('tr')查找最近的 表行。它将找到您的按钮所在的表格行 里面
• .prev()查找所选内容的前一个同级 目的。由于我们当前选择 <tr>你的按钮在 (根据我们的 .closest('tr') )它将查找之前的 <tr> 它位于其上方，并包含您的delete_icon 按钮。
• 现在，我们正在访问<tr>您的按钮对象，但我们需要向下导航
• .children(":first")将导航到当前元素的第一个子元素。这将是您的第一个<td>元素。
• 我们需要再次向下导航，因此我们使用 .children('index.delete_icon') 选择子按钮。
• 您现在已“选择”您的.delete_icon按钮，并且可以 .hide()它。