Question

<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项目，并使其变为虚线，并将当前项目的边框设置为实体？（如果有下一个项目）？

Answer 1

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;
}

Answer 2

这是jQuery的一种方法，如果使用这个库恰好是你的选择：

首先，给每个可以划分的div，一个“标记类”

<div id="item1" class="itemWhichCanBeDashed">
    //loads with a dashed border
</div>
<div id="item2" class="itemWhichCanBeDashed">
    //loads with a solid border
</div>
<div id="item3" class="itemWhichCanBeDashed">
    //loads with a solid border
</div>

然后创建一个虚线边框样式：

<style type="text/css">
    .dashed { border-style: dashed; }
</style>

然后，冲破下一个尚未破灭的div：

$("div.itemWhichCanBeDashed:not(.dashed):first").addClass("dashed");

这会选择所有包含itemWhichCanBeDashed类的div，但是不会附加dashed类，然后选择第一个，然后添加类{{1} }

如果你想让第一个div已经是虚线，那么只需用虚线类渲染它。

我不确定当前div的实际要求是什么，但它应该是这个的简单扩展。

修改

要在项目中托管jQuery，您可以从Google链接到它：

dashed

如果您的用户最近访问过链接到同一文件的网站，则可能会缓存该网站。如果没有，它只下载约92K。

Answer 3

如果您使用像jquery这样的js框架，这会更容易。就像添加head的引用一样简单：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

使用jquery，代码为

var lastChanged;

$(document).ready(function() {
    lastChanged = $('#item1');

    $('#button').click(function() {
        $(lastChanged).css("border", "1px solid #000");
        $(lastChanged).next().css("border", "1px dashed #000");
        lastChanged = $(lastChanged).next();
    }); 
});

这是jsfiddle - http://jsfiddle.net/JKYue/

Answer 4

看看这是否有助于您入门

  <button onclick="nextItem()">Click me</button>


  var nextItem = (function() {

   var arr_item, arr_len, intIdx, currentItemInt;

   arr_item = ["item1", "item2", "item3"];

    arr_len = arr_item.length;
    intIdx = -1;
    currentItemInt = "";

    return function(){

       for (var j= 0; j < arr_len; j++) {

          var elm = document.getElementById(arr_item[j]);
          var os = (elm.currentStyle) ? elm.currentStyle["borderStyle"] : window.getComputedStyle(elm,"").getPropertyValue('border-top-style');

          if(os == "dashed"){
            intIdx = j;
            //alert(j)
            currentItemInt = arr_item[j + 1];
          }
   }

// alert(arr_item[intIdx]) 

   if(intIdx < arr_item.length-1){

     document.getElementById(arr_item[intIdx]).style.border = "white dashed";
     document.getElementById(currentItemInt).style.border = "black dashed";

   }
}
}());

如何选择没有某个CSS类的下一个div

4 个答案: