我用Javascript/Backbone创建了一个表。当使用模板显示行时,我有一个可见行和一个隐藏行。当我点击一个特定的表时,我希望它通过显示隐藏行来“展开”。我还使用了一个循环来创建表,这样所有的行都有相同的类和id。到目前为止,我用这个来展开和折叠行:
expandRow: function() {
if (document.getElementById('hiddenText').style.display == 'none' ) {
document.getElementById('hiddenText').style.display = '';
}
else if (document.getElementById('hiddenText').style.display == '') {
document.getElementById('hiddenText').style.display = 'none';
}
但是,无论我单击哪一行,此解决方案都只能打开和关闭同一个表行(最上面的一行)。我需要帮助来找到一个解决方案,以便只展开/折叠我单击的特定行。
4条答案
按热度按时间eiee3dmh1#
ID对于页面必须是唯一的。如果它们不是唯一的,那么你的JavaScript将只选择第一个出现的地方,在本例中,第一行的ID为“hiddenText”。
您需要通过某种引用来选择所需的行。因此,也许在创建表的循环中,您可以在行
id
s中包含一个增量索引,然后通过该方法选择适当的行。9avjhtql2#
我不知道您是如何构造视图的内部结构的。
上面的代码是用大量的假设编写的,所以它可能是错误的。
wooyq4lh3#
您的脚本在具有该ID的第一个元素处停止,因为它们不是唯一的。您需要让循环动态地创建唯一的ID。要实现这一点,我会使用整数计数器变量(var counter)将一个唯一的数字附加到ID的末尾。然后,我将修改if语句的条件,使其按类名而不是ID来获取(getElementsByClassName('RowExpand '))并将它们全部存储在变量中(var hasClassRowExpand).在onClick事件中,可以获取对所单击行的ID的引用,然后循环遍历hasClassRowExpand中的每个元素.当命中包含具有匹配ID的元素的索引时,根据显示属性的当前状态对其进行操作。
zf2sa74q4#
我使用的CSS类定义如下所示...
...使用JQuery toggleClass来翻转状态。