Question

template.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类。因为我正在使用delete_icon的comman css类，使用此$('.delete_icon').hide();隐藏了动态创建的所有行的删除图标。仅限唯一的东西是删除按钮的值，这意味着delete_icon.Is任何可能性是他们隐藏参考值的css类图标。因此删除图像将仅在处理注释处于打开状态的情况下隐藏。 / p>

注意：有些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()。

Answer 2

尝试使用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结构。

Answer 3

如果删除图标位于以下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();
});

使用引用/使用按钮值隐藏css类delete_icon

3 个答案: