2012-03-06 17 views
5

Próbuję utworzyć niektóre przeciągalne pola w javascript. Postanowiłem stworzyć pustą klasę "przeciągalną" w CSS i klasę "box". Kod jest w następujący sposób:document.querySelectorAll długość jest zawsze 0

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
    .draggable 
    { 

    } 
    .box 
    { 
     position: absolute; 
     width: 80px; height: 60px; 
     padding-top: 10px; 
     text-align: center; 
     font-size: 40px; 
     background-color: #222; 
     color: #CCC; 
    } 
    </style> 
</head> 

<body> 
<div class="draggable box">1</div> 
<div class="draggable box">2</div> 
<div class="draggable box">3</div> 
<script> 
    var draggableStuff = document.querySelectorAll('draggable'); 
    var tabLength = draggableStuff.length; 
    alert(tabLength); 
</script> 
</body> 

Problemem jest to, że tabLength jest zawsze zero. Chcę uzyskać tablicę wypełnioną wszystkimi możliwymi do przeciągnięcia rzeczami. Jestem nowy w javascript. Czego tu brakowało?

Odpowiedz

9

Chcesz wybrać elementy według klasy, więc nie zapomnij o kropce:

var draggableStuff = document.querySelectorAll('.draggable'); 

Inną opcją jest użycie document.getElementsByClassName:

var draggableStuff = document.getElementsBYClassName('draggable'); 
+0

Dzięki dużo! To działa! – Michael

+1

@ Michael Np. Porada na przyszłość, zanim zapytasz, dlaczego coś nie działa, upewnij się, że przeczytałeś poprawną dokumentację. W przypadku JavaScript/CSS/HTML, Mozilla Developer Network jest ogólnie dobra. Dodaj 'mdn' do zapytania, np. ['querySelectorAll mdn'] (http://www.google.com/search?q=mdn+querySelectorAll) i często od razu otrzymujesz właściwe dokumenty: https://developer.mozilla.org/En/DOM/Document .querySelectorAll –

+1

@Rob W: Może chce poprawić 'BY' na' document.getElementsBYClassName'. –

0

natknąłem tej sytuacji. Chociaż jest to zbyt stary wpis, chciałbym pomóc ludziom z moją odpowiedzią:

Aby wybrać wszystkie elementy (bez względu na to, co to jest, może to być div, span, h1, itp.) Z określonym atrybutem

bez wartości ?:

var dragables = document.querySelectorAll('[draggable]'); 

o wartości ?:

var dragables = document.querySelectorAll('[draggable="true"]'); 
Powiązane problemy