Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript]document.querySelectorAll nie pobiera wyników
DerekDX
post 27.11.2013, 18:05:36
Post #1





Grupa: Zarejestrowani
Postów: 108
Pomógł: 0
Dołączył: 23.04.2010

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <!--
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <title></title>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <!-- Bootstrap -->
  9.     <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
  10.     <link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
  11.     <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  12.  
  13.     <!-- Load jQuery -->
  14.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
  15.     </script>
  16.     <!-- Load Google JSAPI -->
  17.     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  18.     <script type="text/javascript">
  19.       var num = null;
  20.       var ele = document.querySelectorAll(".btn-group > button.btn btn-primary");
  21.       for (var i = 0; i < ele.length; i++) {
  22.         ele[i].addEventListener("click", function() {
  23.           num = +this.innerHTML;
  24.           alert("Value is " + num);
  25.         });
  26.       }
  27.     </script>
  28.   </head>
  29.   <body>
  30.     <div class="btn-group" data-toggle="buttons-radio">
  31.       <button type="button" class="btn btn-primary">Left</button>
  32.       <button type="button" class="btn btn-primary">Middle</button>
  33.       <button type="button" class="btn btn-primary">Right</button>
  34.     </div>
  35.     <script src="http://code.jquery.com/jquery.js"></script>
  36.     <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  37.   </body>
  38. </html>
[HTML] pobierz, plaintext


Witajcie powyżej wstawiam mój kod. Mój problem polega na tym, że funkcja document.querySelectorAll nie pobiera żadnej wartości. A powinna pobrać tablice ze wszystkimi elementami z kontenera div.btn-group
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
DerekDX
post 27.11.2013, 19:59:51
Post #2





Grupa: Zarejestrowani
Postów: 108
Pomógł: 0
Dołączył: 23.04.2010

Ostrzeżenie: (0%)
-----

Sprawdziłem również to, ale nadal nie działa. Poniżej kod ze wszystkimi Twoimi wskazówkami

[HTML] pobierz, plaintext 
  1. <!--
  2. To change this template, choose Tools | Templates
  3. and open the template in the editor.
  4. -->
  5. <!DOCTYPE html>
  6. <html>
  7.   <head>
  8.     <title></title>
  9.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <!-- Bootstrap -->
  12.     <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
  13.     <link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
  14.     <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  15.  
  16.     <!-- Load jQuery -->
  17.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
  18.     </script>
  19.     <!-- Load Google JSAPI -->
  20.     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  21.  
  22.   </head>
  23.   <body>
  24.     <div class="btn-group" data-toggle="buttons-radio">
  25.       <table>
  26.         <tr>
  27.           <td><button type="button" class="btn btn-primary">ON</button></td></tr>
  28.         <tr><td><button type="button" class="btn btn-primary">ON</button></td></tr>
  29.         <tr> <td><button type="button" class="btn btn-primary">ON</button></td>
  30.         </tr>
  31.       </table>
  32.     </div>
  33.     <script src="http://code.jquery.com/jquery.js"></script>
  34.     <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  35.     <script type="text/javascript">
  36.       var num = null;
  37.       var ele = document.querySelectorAll(".btn-group > button.btn.btn-primary");
  38.       for (var i = 0; i < ele.length; i++) {
  39.         ele[i].addEventListener("click", function() {
  40.           num = +this.innerHTML;
  41.           alert("Value is " + num);
  42.         });
  43.       }
  44.     </script>
  45.   </body>
  46. </html>
[HTML] pobierz, plaintext


Nie rozumiem tylko dlaczego w funkcji miało by być .btn-group > button.btn.btn-primary skoro w klasie css jest .btn-group > button.btn btn-primary
Go to the top of the page
+Quote Post
SmokAnalog
post 27.11.2013, 20:59:48
Post #3





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Cytat(DerekDX @ 27.11.2013, 19:59:51 ) *
Nie rozumiem tylko dlaczego w funkcji miało by być .btn-group > button.btn.btn-primary skoro w klasie css jest .btn-group > button.btn btn-primary

Zapis class="klasa1 klasa2" oznacza, że masz przypisane dwie klasy do jednego elementu. Oczywiście możesz mieć ich tyle, ile chcesz. Selektor:
[CSS] pobierz, plaintext 
  1. button.btn btn-primary
[CSS] pobierz, plaintext

Oznaczałby element o tagu btn-primary (dziwadło), który jest gdzieś wewnątrz elementu button o klasie btn. Spacja w selektorze to "element wewnątrz".

Natomiast taki selektor:
[CSS] pobierz, plaintext 
  1. button.btn.btn-primary
[CSS] pobierz, plaintext

Oznacza element o tagu button, który ma klasę btn, jednocześnie mając klasę btn-primary.

A wracając do Twojego kodu, to używasz jQuery - może warto byłoby skorzystać z jego dobrodziejstw? Tutaj masz informację o wsparciu dla querySelectorAll: http://caniuse.com/queryselector - nie jest źle, ale w IE7 np. nie zadziała.

Lepiej, żeby zajął się tym jQuery - poniższy kod robi dokładnie to samo, co Twój:
[JAVASCRIPT] pobierz, plaintext 
  1. $(".btn-group button.btn.btn-primary").click(function () {
  2. 	alert("Value is " + parseInt($(this).html(), 10));
  3. });
[JAVASCRIPT] pobierz, plaintext

Prawda, że prościej i przyjemniej?

Pomijam sensowność rzutowania wewnętrznego HTML-a na liczbę (u Ciebie było +this.innerHTML). Czy ten zapis był pomyłką?

Ten post edytował SmokAnalog 27.11.2013, 21:02:14
Go to the top of the page
+Quote Post

Posty w temacie
- DerekDX   [JavaScript]document.querySelectorAll nie pobiera wyników   27.11.2013, 18:05:36
- - SmokAnalog   Użyłeś nieprawidłowego selektora. Powinieneś dać: ...   27.11.2013, 18:55:30
- - DerekDX   [HTML] pobierz, plaintext <!--To change this te...   27.11.2013, 19:26:38
- - SmokAnalog   Nie działa Ci dlatego, że skrypt się wywołuje zani...   27.11.2013, 19:40:36
- - DerekDX   Ehh. Zrobiłem jak piszesz. wrzuciłem cały js na dó...   27.11.2013, 19:50:49
- - SmokAnalog   Bo wrzuciłeś, ale bez mojej porady w sprawie selek...   27.11.2013, 19:52:34
- - DerekDX   Sprawdziłem również to, ale nadal nie działa. Poni...   27.11.2013, 19:59:51
|- - SmokAnalog   Cytat(DerekDX @ 27.11.2013, 19:59:51 ...   27.11.2013, 20:59:48
- - SmokAnalog   Zmieniłeś HTML i teraz już selektor jest nieaktual...   27.11.2013, 20:10:51
- - werdan   http://jsbin.com/acEJOweV/1/edit   27.11.2013, 20:26:57

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 13:42
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn