Как выбрать следующий div, который не имеет определенного класса 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()
{

}

Что бы я добавил в функцию перемещения, чтобы получить следующий элемент 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");

Это выбирает все div с классом itemWhichCanBeDashed, но не имеет присоединенный класс dashed, затем берет первый, затем добавляет класс dashed

Если вы хотите, чтобы первый div уже был разбит, то просто визуализируйте его с помощью разбитого класса.

Я не совсем уверен, каково требование создания текущего тела div, но это должно быть простым расширением этого.

EDIT

Чтобы разместить jQuery в своем проекте, вы можете сослаться на него из Google:

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

Если ваш пользователь недавно посетил сайт, который ссылался на тот же файл, он, вероятно, будет кэширован. Если нет, то это всего лишь загрузка 92K.

Answer 3

Это было бы проще, если бы вы использовали js-фреймворк, такой как jquery .Это так же просто, как добавить ссылку на ваш 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";

   }
}
}());