如何選擇不具有一定的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"; 

    } 
} 
}());