2012-03-06 10 views
5

Sto provando a creare alcune caselle trascinabili in javascript. Ho deciso di creare una classe vuota "trascinabile" in CSS e una classe "scatola". Il codice è il seguente:document.querySelectorTutta la lunghezza è sempre 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> 

Il problema è che tabLength è sempre zero. Voglio avere un array pieno di cose trascinabili. Sono nuovo di javascript. Cosa mi sono perso qui?

risposta

9

si desidera selezionare gli elementi per classe, in modo da non dimenticare il punto:

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

Un'altra opzione è quella di utilizzare document.getElementsByClassName:

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

Thanks a lot! Funziona! – Michael

+1

@ Michael Np. Suggerimento per la prossima volta, prima di chiedere perché qualcosa non funziona, assicurarsi di aver letto la documentazione corretta. Per JavaScript/CSS/HTML, la rete di sviluppatori Mozilla è generalmente buona. Aggiungi 'mdn' alla tua query di ricerca, ad es. ['querySelectorAll mdn'] (http://www.google.com/search?q=mdn+querySelectorAll), e ottieni spesso i documenti giusti immediatamente: https://developer.mozilla.org/En/DOM/Document .querySelectorAll –

+1

@Rob W: Potrebbe voler correggere 'BY' su' document.getElementsBYClassName'. –

0

mi sono imbattuto in questa situazione. Anche se è post troppo vecchio, vorrei aiutare le persone con la mia risposta:

Per selezionare tutti gli elementi (non importa quale sia, potrebbe essere div, span, h1, ecc ...) con attributo particolare

Senza valore ?:

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

Con valore ?:

var dragables = document.querySelectorAll('[draggable="true"]'); 
Problemi correlati