2014-02-28 131 views
2

我很抱歉如果这是一个重复的问题,但我无法找到答案。没有一个例子,我无法找到解决问题的方法。 想象一下,我有几百行的表。现在,在每行中我有一个选择框:更改表格行内的属性

<select id="task_stat" name="task[stat]" style="display: none;"></select> 

选项是不是一个问题,现在(我在我的实际文件数)。现在所有这些选择框都有相同的id字段。我想知道如何改变只有一个选择框的显示,当它是相应的<tr>被点击。我有以下几种:

$("#myTableId tr").click(function() { 
    $("select #task_stat").css("display"),"block"); 
}); 

当然还有$(document).ready的功能。但是,这将显示所有选择框(按预期),而不仅仅是一个。有没有办法只显示点击表格行上的选择框? (我真的很喜欢它,如果可以点击<td>,但我不认为<td>支持.click

+3

你不应该有相同'id'元素。元素可以共享相同的'class',但'id's需要始终是唯一的。 –

+0

由rails生成,我真的不明白为什么他们在他们的框架中允许这样的错误。 – Arijoon

回答

2

首先,你不能有重复的id领域,使用类来代替。其次,你应该能够改变你的函数这样的事情,引用被点击的tr的子元素:

$("#myTableId tr").click(function() { 
    $(this).children("select .task_stat").css("display","block"); 
}); 

这会假设你改变了你的标记是这样的:

<select class="task_stat" name="task[stat]" style="display: none;"></select> 

编辑

如在下面的评论中提到,这很可能是嵌套超出tr的直系后裔,所以使用find()而不是children()会比较合适:

$("#myTableId tr").click(function() { 
    $(this).find("select .task_stat").css("display","block"); 
}); 
+1

如果您选择的元素不是''的直接后代,则使用'.find()'而不是'.children()'。 – pschueller

+0

是的,好点。 – Goose

+0

非常感谢你的回答。我必须拥有相同的ID,因为它是由rails'form_for'生成的。我将寻找一种使用rails分配类的方法。 – Arijoon

1

ID的应始终独一无二。这是他们背后的关键。如果您有多个元素,请在需要钩子时尝试使用类名。

如果这些输入是通过循环或其他方式生成服务器端,请查看是否可以将循环迭代器或其他东西附加到id。例如,“mySelect1”。

Check out this jsFiddle它应该让你朝着正确的方向前进。

东西沿着这些线路是你需要的JavaScript:

$('table td').on('click', function (event) { 
    $(this).closest('tr').find('select').css('display', 'block'); 
}); 
+0

Dude你是一个传奇人物。这正是我想要的一点改变。我已经接受了另一个答案,但这很好。我从服务器分配了一个类给我的元素,但没有更改它们的ID,因为rails使用该ID将它们保存到数据库中 – Arijoon

+0

非常欢迎。我很高兴它有帮助! – Damon