[英]Hover next / previous element
I need to be able to have the next element / previous element to change the background color with the current element. 我需要能够使用下一个元素/上一个元素来更改当前元素的背景颜色。 How do I do that.
我怎么做。 The element that I am working is TR, table row, and nextSibling, previousSibling doesn't do the trick for me, don't know why ?
我正在工作的元素是TR,表行和nextSibling,previousSibling对我来说不可行,不知道为什么吗?
I think we have a case here of even the "good" browsers behaving in an extremely annoying way. 我认为我们这里有一个例子,即使是“好”的浏览器也表现得非常烦人。
Take for example my following table, where the HTML looks like the following: 以我的下表为例,HTML如下所示:
<table border="1">
<thead>
<tr id="header">
<th>eng</th>
<th>deu</th>
<th>spa</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td>one</td>
<td>eins</td>
<td>uno</td>
</tr>
<tr id="row2">
<td>spoon</td>
<td>der Löffel</td>
<td>la cucharita</td>
</tr>
</tbody>
</table>
When I open this up in Firefox and go to the console and run the following snippets, notice the how nextSibling behaves: 当我在Firefox中打开它并转到控制台并运行以下代码片段时,请注意nextSibling的行为:
// My input command
document.getElementById("row1").nextSibling;
// Output from the console
<TextNode textContent="\n ">
I've read about this somewhere, and I forget exactly where (Quirksblog, or perhaps from a talk PPK did), so then I tried the following: 我已经在某处读到了有关此内容的文章,却忘记了确切的位置(Quirksblog,或者可能是PPK的谈话),因此我尝试了以下操作:
// my input command
document.getElementById("row1").nextSibling.nextSibling;
// output from the console
<tr id="row2">
This is one of those moments where our wonderful standards compliant browsers do it (IMHO) absolutely wrong. 这是我们符合标准的出色浏览器(IMHO)完全错误的时刻之一。
To test, I decide to single line the HTML of my table, hence (hopefully it shows up all on one line): 为了测试,我决定将表格的HTML单行显示,因此(希望它全部显示在一行上):
<table border="1"><thead><tr id="header"><th>eng</th><th>deu</th><th>spa</th></tr></thead><tbody><tr id="row1"><td>one</td><td>eins</td><td>uno</td></tr><tr id="row2"><td>spoon</td><td>der Löffel</td><td>la cucharita</td></tr></tbody></table>
And run my test again: 并再次运行我的测试:
// Hmmm, does nextSibling work _as expected_ now?
document.getElementById("row1").nextSibling;
// yep
<tr id="row2">
Benice, your idea was correct, but you got bit by what I like to think of as an implementation oversight on the browser's part. Benice,您的想法是正确的,但是您对我想作为浏览器方面的实施监督感到有些困惑。 I recommend being very careful with HTML DOM relationships cross-browser.
我建议对跨浏览器的HTML DOM关系要非常小心。 Most of them work as expected , but sometimes they don't.
他们中的大多数人都按预期工作,但有时却没有。
Ahh, found an article about this after all: https://developer.mozilla.org/en/Whitespace_in_the_DOM 啊,毕竟找到了关于此的文章: https : //developer.mozilla.org/en/Whitespace_in_the_DOM
Using jQuery you could apply the hover() function and set a class which has the appropriate background color to the next and previous rows. 使用jQuery,您可以应用hover()函数并为下一行和上一行设置具有适当背景颜色的类。 Going out of a row would remove the highlight from those rows.
离开行会从这些行中删除突出显示。 To be sure, you'd reset the highlight class on the entire table before applying it to any rows.
可以肯定的是,在将突出显示类应用于所有行之前,需要对其进行重置。
$('tr').hover(
function() {
var $this = $(this);
$this.closest('table').find('tr').removeClass('highlight');
$this.next('tr').addClass('highlight');
$this.prev('tr').addClass('highlight');
$this.addClass('highlight');
},
function() {
var $this = $(this);
$this.next('tr').removeClass('highlight');
$this.prev('tr').removeClass('highlight');
$this.removeClass('highlight');
}
});
This depends on this snippet of CSS 这取决于此CSS代码段
.highlight {
background-color: #ff8; /* or whatever color you choose */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.