Javascript 使用引用/使用按钮值隐藏css类删除图标

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>

{{report\u person.report\u person.name}

上面的行是使用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>

添加治疗说明

添加治疗注释

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

隐藏治疗注释

当治疗说明打开f时，我想隐藏个人姓名的delete_图标类。因为我使用comman css类来删除图标，所以使用这个

$（'.delete_图标'）.hide（）

正在隐藏动态创建的所有行的删除图标。唯一唯一的是删除按钮的值，这意味着删除图标。是否有可能隐藏css类图标参考值。这样，删除图像将仅在治疗说明处于打开状态时隐藏

---

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

在jQuery中，您可以使用

this

查找。假设这些都在一个div、span或某种容器中。您只需从该容器向下搜索并关闭删除按钮

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

离开您提供的模板，您将使用子对象，还可以向上导航DOM，然后向下导航

您的代码大致如下：

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

让我们来了解一下：

• $（此）

  是当前“单击”的表行，其中包括

  添加治疗

  按钮

• 最近的（'tr'）

  查找最近的 表行。它将找到按钮所在的表格行 里面

• .prev（）

  查找所选对象的上一个同级 对象由于我们当前正在选择
  ，因此您的按钮处于 （根据我们的

  .closest（'tr'）

  ）它将查找前面的
  位于其上方，并保持“删除”图标按钮
• 现在，我们在按钮对象的
  上，但我们需要向下导航

• .children（“：first”）

  将导航到当前元素的第一个子元素。这将是您的第一个
  元素
• 我们需要再向下导航一个按钮，因此我们使用

  .children（'index.delete_图标'）选择按钮子项。

• 现在您已经“选择”了

  .delete_图标
  按钮，并且可以
  .hide（）
  它

---

在jQuery中，您可以使用

this

查找。假设这些都在一个div、span或某种容器中。您只需从该容器向下搜索并关闭删除按钮

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

离开您提供的模板，您将使用子对象，还可以向上导航DOM，然后向下导航

您的代码大致如下：

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

让我们来了解一下：

• $（此）

  是当前“单击”的表行，其中包括

  添加治疗

  按钮

• 最近的（'tr'）

  查找最近的 表行。它将找到按钮所在的表格行 里面

• .prev（）

  查找所选对象的上一个同级 对象由于我们当前正在选择
  ，因此您的按钮处于 （根据我们的

  .closest（'tr'）

  ）它将查找前面的
  位于其上方，并保持“删除”图标按钮
• 现在，我们在按钮对象的
  上，但我们需要向下导航

• .children（“：first”）

  将导航到当前元素的第一个子元素。这将是您的第一个
  元素
• 我们需要再向下导航一个按钮，因此我们使用

  .children（'index.delete_图标'）选择按钮子项。

• 现在您已经“选择”了

  .delete_图标
  按钮，并且可以
  .hide（）
  它

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

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

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

---

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

---

以下结果div中是否有删除图标？@AdrianTrainor delete图标是否在a中？以下结果div中是否有删除图标？@AdrianTrainor delete图标是否在a

中最接近的

也可以在此处工作，具体取决于整行的设置方式。如果看不到整个表格行，就很难找到完美的选择器。Jckelley，在更新的答案中，container_类指的是我的问题中的内容，如果这是一个愚蠢的问题，那么很抱歉。关于您迄今为止对项目的解释，我相信它将是您的类。根据更新的答案，查看最近的答案。这可能有助于您更好地理解它。@JcKelley我在我的应用程序中应用了第三个图标，没有发生更改，即删除图标没有隐藏。您也可以发布您尝试过的JS吗？我们看到的代码越多越好（大多数情况下）

最近的

也可能在这里工作，这取决于整行的设置方式。如果看不到整个表格行，就很难找到完美的选择器。Jckelley，在更新的答案中，container_类指的是我的问题中的内容，如果这是一个愚蠢的问题，那么很抱歉。关于您迄今为止对项目的解释，我相信它将是您的类。根据更新的答案，查看最近的答案。这可能有助于您更好地理解它。@JcKelley我在我的应用程序中应用了第三种方法，即del