Display di impostazione semplice: nessuno / blocco con javascript

Ho il codice seguente:

Entry 1
> Entry 2
  • Information 1
  • Information 2
Entry 3
Entry 4

e il seguente js:

 function showHide(id) { var el = document.getElementById(id); if( el && el.style.display == 'none') el.style.display = 'block'; else el.style.display = 'none'; } 

con questo css:

 tr.odd{ background-color: #dedede; } tr.even{ background-color: #7ea9ff; } tr.clickable{ cursor: pointer; } tr.clickable:hover{ color: white; } tr[id^="sub"]{ display: none; } 

Qualcuno potrebbe dirmi, perché non funziona? Sto cercando di mostrare / hide onclick la riga con id = “sub2”

esempio in jsfiddle

Apri la tua console di debug quando esegui il tuo codice e riceverai il messaggio “ReferenceError: showHide non è definito”.

Se collochi il tuo html e javascript in un file ed esegui che quel particolare problema è stato risolto. Ha qualcosa a che fare con l’ordine con cui jsfiddle elabora le fonti.

In secondo luogo, stai cercando di ottenere un elemento con id, ma dargli il nome della class – che non ha senso. Dando elementi di id e usando che funziona.

Ma questo è molto ingombrante e serve solo a spiegare perché non ha funzionato. Stai meglio usando jQuery come ha detto Raphael.

modifica: sostituito html con link

 function showHide(id) { var el = document.getElementById(id); if( el && el.style.display == 'block') el.style.display = 'none'; else el.style.display = 'block'; } 

Prima di tutto, nell’esempio JSFiddle, la funzione è racchiusa in un evento domready. Dovresti cambiare il wrap del tuo JavaScript nel corpo No wrap-in . Questo può essere impostato nel secondo menu a discesa nella barra sinistra. La tua funzione non sarà accessibile altrimenti.

Quindi, la seconda riga nel tuo JavaScript cerca un elemento con un ID, ma il tuo documento non contiene alcun ID, contiene classi. document.getElementById può trovare solo gli elementi in base al loro ID.

Ti suggerirei di utilizzare jQuery per questa attività. Con jQuery, l’attività può essere risolta in questo modo:

HTML:

 
Product 1
> Product 2
   Information 1
   Information 2
Product 3
Product 4

JavaScript:

 $(document).ready(function() { $(".trigger").click(function() { $(".even").toggle(); }); }); 

JSFiddle

jQuery Attiva / distriggers la documentazione

Non so spiegarti perché questo sta accadendo, ma devi verificare se la proprietà di visualizzazione css è impostata su none o è vuota. Quindi questo attiverà la tua funzione dalla prima volta, altrimenti andrà su “else”, e quindi si innescherà al clic successivo.

Quindi è necessario verificare le seguenti condizioni:

if( el && el.style.display === 'none' || el.style.display === '')