隐藏css类delete_icon参考/使用按钮值

template.html隐藏css类delete_icon参考/使用按钮值

<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.Its人名和删除图标。对于动态创建的每一行，都会显示删除图标。

<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。因为我使用comman css类作为delete_icon，所以使用$('.delete_icon').hide();隐藏了动态创建的所有行的删除图标。唯一的事情是该删除按钮的值，这意味着delete_icon.Is任何可能性是他们隐藏CSS参考值的图标。因此，删除图像将只隐藏治疗笔记处于打开状态的情况。

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

来源

2013-07-01 user2086641

在以下结果的div删除图标？ –

@AdrianTrainor删除图标在 – user2086641

在jQuery中，您可以使用this来查找child elements。假设这是全部在一个div，或跨度，或某种容器。您可以简单地从该容器向下搜索并关闭您的删除按钮。

$(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()它。

来源

2013-07-01 16:33:48 JcKelley

'最接近'也可能在这里工作，这取决于整个行的设置方式。没有看到整个表格行，很难找出完美的选择器。 –

Jckelley，在更新后的答案中，container_class指的是我的中的内容，对不起，如果它是一个愚蠢的问题。 – user2086641

到目前为止，您已经解释了您的项目，我相信这将是您的的课程。根据最新的答案，查看最近的。这可能会帮助你更好地理解它。 – JcKelley

尝试使用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-01 16:43:30

如果删除图标下面的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-01 16:46:17

'.closest（'td'）'在这里是多余的，不是吗？它只会选择自己。最近（）开始自己，然后搜索DOM树... – JcKelley

真正的数据，我的坏 –

隐藏css类delete_icon参考/使用按钮值

回答

相关问题