1

模板.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>

Add treatment notes是一个切换按钮，它在一个切换上显示治疗细节，在这种状态下按钮的名称变为Hide treatment notes。

我想在处理注释打开时隐藏单个名称的 delete_icon 类 f。由于我对 delete_icon 使用 comman css 类，因此使用它 $('.delete_icon').hide();隐藏了动态创建的所有行的删除图标。唯一唯一的是该删除的值按钮，这意味着删除图标。是否有任何可能性是他们参考值隐藏 css 类图标。这样删除图像只会在治疗说明处于打开状态的情况下隐藏。

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

4

3 回答 3

1

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

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

离开您提供的模板，您将使用 children 和.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()。
于 2013-07-01T16:33:48.527 回答
0

尝试使用 jQuery .find() 函数。 

$('.add_treatment').on('click', function() {
    var $this = $(this);
    $this.find('input[class*='delete_icon']').prop('disabled', true);
    // toggle notes
    // hide delete icon (if you do not like the css below)
});

添加 css 规则将有助于减少所需的 javascript 函数/操作的数量。

tr td .delete_icon {
    display:none;
}
tr:hover td .delete_icon {
    display:block;
}

还有其他更有效的方法可以做到这一点，但我们需要更多的 html 结构。

于 2013-07-01T16:43:30.997 回答
0

如果删除图标在以下 td 中（动态创建），您需要：

$('.add_treatment').click(function(){
    // should point to the parent td, the next td, its children,
    // and hide the first child which is the input button
    $(this).parent().next().children('.delete_icon').hide();
});
于 2013-07-01T16:46:17.457 回答