<div id="button">
Click me
</div>
<div id=item1> //loads with a dashed border
</div>
<div id=item2> //loads with a solid border
</div>
<div id=item3> //loads with a solid border
</div>
脚本部分:
var eventNext = document.getElementById("button");
eventNext.addEventListener("click", move, false);
function move()
{
}
我应该在 move 函数中放置什么来获取下一个没有虚线边框的 div 项目,并使其变为虚线,并将当前项目的边框变为实线? (如果有下一项)?
最佳答案
var eventNext = document.getElementById("button");
eventNext.addEventListener("click", move, false);
function move() {
if( eventNext ) {
if( eventNext.id !== 'button' ) {
eventNext.className = 'solidBorder';
}
eventNext = eventNext.nextElementSibling;
if( eventNext ) {
eventNext.className = 'dashBorder';
}
}
}
.dashBorder {
border: 2px dashed blue;
}
.solidBorder{
border: 2px solid blue;
}
或者使用 jquery
var eventNext = $("#button").bind("click", move);
function move() {
if( eventNext.length ) {
if( eventNext.attr('id') !== 'button' ) {
eventNext.attr( 'class', 'solidBorder' );
}
eventNext = eventNext.next();
if( eventNext.length ) {
eventNext.attr( 'class', 'dashBorder' );
}
}
}
如果您需要支持不支持 nextElementSibling 的浏览器,请改用此函数。
function next( elem ) {
while( (elem = elem.nextSibling) && (elem.nodeType !== 1) );
return elem;
}
关于javascript - 如何选择下一个没有特定 CSS 类的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8291248/