如何选择不具有一定的CSS类

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() 
{ 

} 

我会放在移动功能得到什么，它没有虚线下一格项目边框，并使其虚线，并将当前项目的边框固定？ （如果有下一个项目）？

Answer 1

下面是用jQuery的一种方式，如果使用这个库恰好是一个选择：

首先，给它可以变成虚线每格，“标记类”

<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.itemWhichCanBeDashed:not(.dashed):first").addClass("dashed"); 

这将选择与类itemWhichCanBeDashed所有div，但确实不有附dashed类，则采取第一个，然后添加类dashed

如果你想第一个div为已经虚线，然后用虚线类渲染它。

我不确定究竟是什么使当前股利固体的要求是，但它应该是一个简单的扩展。

编辑

要在项目举办的jQuery，你可以从谷歌链接到它：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

如果你的用户最近访问过被链接到同一个文件一个站点，它可能会被缓存。如果没有，它只有大约92K的下载。

Answer 2

如果您使用类似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 3

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浏览器，使用该functoin代替。

function next(elem) { 
    while((elem = elem.nextSibling) && (elem.nodeType !== 1)); 
    return elem; 
} 

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

    } 
} 
}());