Dubbio su JQuery

[shaun87]

Non sò se è il posto giusto questo...Ho un problema io ho una struttura del genere:
<div id="figure_1" class="picture">
<p class="img_block">
<img src="#cur_data" class="horizontal_bar_chart" alt="Let's graph it!"></img>
</p>
<p class="caption">Caption of the figure.</p>
</div>

ripetute 6 volte ognuna cambia il nome della classe del tag <img>
Quello che devo fare è sostituire il tag <p> con class=img_block con un diagramma diverso per ogni attributo class dell'immagine....

Questo è il codice per la sostituzione

$('.img_block').each(function(){
		$(this).convertToGraph();
	});

Questo quello di convertToGraph()

var src = $(this).find("img").attr("src");
		switch($(this).find("img").attr("class")){
			case "horizontal_bar_chart":
			$(this).replaceWith('<div id="d3div"></div>');
				barHorChart(src);				
			break;
			case "vertical_bar_chart":
				$(this).replaceWith('<div id="d3div2"></div>');
				barVertChart(src);			
			break;
			case "pie_chart":
				$(this).replaceWith('<div id="d3div3"></div>');
				barPieChart(src);
			break;
		}

Il problema è che invece di farmi un grafico per ogni div me ne fà 2 per i i primi 3 div e negli ultimi 3 lascia le cose originarie....sbaglio qualcosa io?

[KillerWorm]

Tieni ben presente che gli id devono necessariamente essere univoci all'interno di uno stessa pagina html.
Questa è una regola di base della programmazione web in generale.
Se serve, puoi dare uno sguardo a questa guida http://www.html.it/pag/14217/id-e-cl...tori-speciali/, nella parte "Id e classi", per capire come funzionano e come dovrebbero essere usati questi due attributi html.

<div id="figure_1" class="picture">

Se ripeti più volte questa roba, senza sostituire il valore dell'id, avrai sicuramente dei problemi.

Oltretutto, lo script va a creare dei div con un id (ad esempio: div id="d3div"). Non si capisce, da quello che hai indicato, come hai attribuito le classi che sono poi usate sullo switch. Facendo due conti, dici di aver ripetuto 6 volte quel frammento html, mentre i case sono 3, se ne deduce che avrai molto probabilmente degli elementi img con la stessa classe e questo comporta la creazione (attraverso quello script) di più div con lo stesso id. Questo non è consentito.

Molto probabilmente il problema sta lì. Assicurati quindi che gli id siano univoci.

[shaun87]

Grazie mille,purtroppo l html mi è stato fornito cosi dal professore,e non posso modificare nulla nell html

la struttura interessata e' questa

<div id="figure_1" class="picture">
                <p class="img_block">
                    <img src="#cur_data" class="horizontal_bar_chart" alt="Let's graph it!"></img>
                </p>
                <p class="caption">Caption of the figure.</p>
            </div>
            <div id="figure_2" class="picture">
                <p class="img_block">
                    <img src="#cur_data" class="vertical_bar_chart" alt="Let's graph it!"></img>
                </p>
                <p class="caption">Caption of the figure.</p>
            </div>
            <div id="figure_3" class="picture">
                <p class="img_block">
                    <img src="#cur_data" class="pie_chart" alt="Let's graph it!"></img>
                </p>
                <p class="caption">Caption of the figure.</p>
            </div>
            <div id="figure_4" class="picture">
                <p class="img_block">
                    <img src="#cur_data" class="horizontal_bar_chart" alt="Let's graph it!"></img>
                </p>
                <p class="caption">Caption of the figure.</p>
            </div>
            <div id="figure_5" class="picture">
                <p class="img_block">
                    <img src="#cur_data" class="vertical_bar_chart" alt="Let's graph it!"></img>
                </p>
                <p class="caption">Caption of the figure.</p>
            </div>
            <div id="figure_6" class="picture">
                <p class="img_block">
                    <img src="#cur_data" class="pie_chart" alt="Let's graph it!"></img>
                </p>
                <p class="caption">Caption of the figure.</p>
            </div>
        </div>

la sostituzione del và fatta su ogni p con class img_block e creare un grafo diverso in base alla classe delle img

[KillerWorm]

Ok per il codice HTML, spero sia chiaro ciò che ti ho indicato riguardo il fatto che gli id devono essere univoci.
In questo caso il codice HTML è corretto riguardo gli id. Infatti, nonostante i blocchi <div> siano ripetuti, come hai indicato sul primo post, gli id specificati sono comunque differenti ed è giusto che sia così. Questo non era chiaro dalle indicazioni sul tuo primo post.

Ad ogni modo noto, su quel codice, ci sono due errori.
1- sull'ultima riga c'è una chiusura in più di un div.
2- il tag img è un tag, cosiddetto, "vuoto". Significa che non ha bisogno del tag di chiusura.
Non so se questo possa influire sul funzionamento e sull'errore che segnali ma è comunque un errore di validazione che andrebbe corretto, a prescindere da quello che dice il professore.
Puoi semplicemente eliminare tutti i tag </img> (che chiudono i tag <img>). Nel caso tu stia usando XHTML, allora sarà necessario chiudere comunque il tag inserendo lo slash (/) prima della parentesi angolare di chiusura:

<img src="..." alt="..."/>

Mentre, se stai usando HTML, puoi anche omettere lo slash:

<img src="..." alt="...">

Il problema degli id duplicati, resta comunque sul tuo script. Come già detto nel precedente post, è presumibile che il tuo script generi degli elementi con lo stesso id. Questo non è corretto.

Ad ogni modo non è semplice capire come risolvere senza vedere lo script in azione o quantomeno l'esito prodotto da tale script. Se puoi, posta il link ad una pagina pubblica dove sia visibile il problema che riscontri.

[shaun87]

Immagine.jpgogni sezione dovrebbe essere composto cosi grafico,didascalia,solo che mi mette 2 grafici e una didascalia e 3 didascalia vuote,ho eliminato il tag </img> ma nulla è cambiato

[KillerWorm]

L'immagine non mi dice molto. Ripeto, controlla che sul codice html, dopo l'esecuzione dello script, non ci siano elementi con lo stesso id.

[shaun87]

Ho controllato sul codice tramite strumento sviluppatori ed effettivamente nei div con id figure_1,2,3 al loro interno è presente un div con id d3div1,2,3 con due grafici invece che uno solo,invece in quelli con id figure_4,5,6 le cose rimangono senza modifiche.


Modificootete chiudere ho fatto un switch innestato controllando l'id del div padre e applicando i grafi ognuno su un div diverso