[Jqueri} problema toggle e classi

[Meliupa]

Salve ragazzi ho due problemi, ho richiamato un file Json in HTML, fin qui tutto bene, in questo file ci sono immagini e testo, il testo viene inserito in un paragrafo all'interno di un div, le foto invece vengono caricate in un altro div.

I miei problemi sono:
Ho inserito una funzione Jqueri in modo che venga assegnata la classe esatta alle foto, funziona ma ha una ripetizione continua e blocca la visualizzazione.
Il primo problema credo si risolva col secondo.
Io devo inserire 4 file json all'interno di una stessa sezione, ma quando appare uno deve scomparire l'altro.

Vi aggiungo il codice commentato cos� potete capire meglio.

$("#one").click(function () {    
$.getJSON("data/one.json", function (obj, data) {
        $.each(obj, function (key, value) {
            $("#cont1 .txt").append("<p>" + value.name + "</p>");
            $("#cont1 .txt").append("<p>" + value.details + "</p>");
            $("#cont1 .txt").append("<p>" + value.age + "</p>");
            $("#cont1 .txt").append("<p>" + value.color + "</p>");
            for (var i = 0; i < value.images.length; i++) {
                $("#cont1 .pht").append("<img src=" + value.images [i] + ">");
            }
        });
//aggiunta delle clessi

    $("#section #coldx img").addClass(function(){
            return "photo_";
        });    
    });    
});
        
    
$("#two").click(function () {    
$.getJSON("data/two.json", function (obj, data) {
        $.each(obj, function (key, value) {
            $("#cont2 .txt").append("<p>" + value.name + "</p>");
            $("#cont2 .txt").append("<p>" + value.details + "</p>");
            $("#cont2 .txt").append("<p>" + value.age + "</p>");
            $("#cont2 .txt").append("<p>" + value.color + "</p>");
            for (var i = 0; i < value.images.length; i++) {
                $("#cont2 .pht").append("<img src=" + value.images [i] + ">");
            }
        });
    $("#section #coldx img").addClass(function(n){
            return "photo_" + n;
        });    
    });
});


$("#three").click(function () {    
$.getJSON("data/one.json", function (obj, data) {
        $.each(obj, function (key, value) {
            $("#cont3 .txt").append("<p>" + value.name + "</p>");
            $("#cont3 .txt").append("<p>" + value.details + "</p>");
            $("#cont3 .txt").append("<p>" + value.age + "</p>");
            $("#cont3 .txt").append("<p>" + value.color + "</p>");
            for (var i = 0; i < value.images.length; i++) {
                $("#cont3 .pht").append("<img src=" + value.images [i] + ">");
            }
        });
    $("#section #coldx img").addClass(function(){
            return "photo_";
        });    
    });    
});
        
    
$("#four").click(function () {    
$.getJSON("data/two.json", function (obj, data) {
        $.each(obj, function (key, value) {
            $("#cont4 .txt").append("<p>" + value.name + "</p>");
            $("#cont4 .txt").append("<p>" + value.details + "</p>");
            $("#cont4 .txt").append("<p>" + value.age + "</p>");
            $("#cont4 .txt").append("<p>" + value.color + "</p>");
            for (var i = 0; i < value.images.length; i++) {
                $("#cont4 .pht").append("<img src=" + value.images [i] + ">");
            }
        });
//aggiunta delle clessi
    $("#section #coldx img").addClass(function(n){
            return "photo_" + n;
        });    
    });
});

questo invece � il codice html

<div id="section">            
  <div id="colsx">              
    <ul>                      
     <li id="one">one</li>                   
    <li id="two">two</li>                  
    <li id="three">three</li>                     
    <li id="four">four</li>           
   </ul>           
  </div>   
 <div id="coldx">    
<div id="cont1">  
  <div class="txt"></div>  
  <div class="pht"></div>   
</div>   
<div id="cont2">    
   <div class="txt"></div>
    <div class="pht"></div>   
 </div>  
  <div id="cont3">    
<div class="txt"></div>  
  <div class="pht"></div>    
</div>   
 <div id="cont4"> 
   <div class="txt"></div> 
   <div class="pht"></div>  
  </div>   
 </div>
 </div>

ho inserito pi� div perch� pensavo che aggiungendo e rimuovendo le classi riuscissi a risolvere il problema della visualizzazione, ma in realt� l'importante � solo che sia che i paragrafi che le foto appaiano nella "coldx" e che la continua creazione di classi a ogni click si fermi.
spero di essere stato abbastanza chiaro, nel caso chiedete pure

[m4rko80]

Ciao, le classi potresi assegarle dierettamente dove crei il tag immagine dove fai l'append dei tag img.
Ora avendo più blocchi js separati che alla fina fanno la stessa cosa, aggiungi la classe tante volte quante sono i blocchi html.
Se non ti serve rigenerare gli elementi fino al ricaricamento della pagina potresti sostituire il .click() con il .one() per eseguire una volta e poi piu'.
In alternativa si potrebbe ripensare un minimo come metter giù il codice sapendo cosa esattamente serve fare in pagina.

[Meliupa]

Ho pensato al .one, ma non posso utilizzarlo, visto che sono informazioni, l'utenye pu� cliccare quante volte vuole per rivedere quell'informazione, avrei bisogno che se eseguo una funzione le altre siano annullate. Se clikko su #one, #two #three e #four non devono occupare lo spazio nella cl#coldx

[m4rko80]

Tutto sta da com'è scritto il codice. Puoi inizialmente dare una classe ai div contenitori la prima volta che vengono riempiti.
Dal secondo click se questa classe è già presente salti la parte di riempimento e mostri solamente i dati.
Si può fare tutto, c'è solo da ingeniarsi sul come fare.

[Meliupa]

Il mio codice ora è così:

$("#four").click(function () {	
$.getJSON("data/four.json", function (obj, data) {
        $.each(obj, function (key, value) {
            $("#cont4 .txt4").append("<p class='done'>" + value.name + "</p>");
            $("#cont4 .txt4").append("<p class='done'>" + value.details + "</p>");
            $("#cont4 .txt4").append("<p class='done'>" + value.age + "</p>");
            $("#cont4 .txt4").append("<p class='done'>" + value.color + "</p>");
            for (var i = 0; i < value.images.length; i++) {
                $("#cont4 .pht4").append("<img class='done' src=" + value.images [i] + ">");	
			return (false);
				
            };
		});
	$("#section #coldx img").addClass(function(n){
            return "photo_" + 3;
        });	
	
});

vorrei che dopo che ha caricato la prima volta il contenuto, se clicco una seconda volta me lo fa vedere, ma non lo ripeta nuovamente, altrimenti si sballa la visualizzazione.
quindi detto in soldoni, vorrei che dopo che ha caricato la prima volta tutto il contenuto si possa procedere con un toggle o qualcosa del genere.

ho provato anche con l'if e hasClass, poichè ho aggiunto la classe done a tutti gli elementi che vengono caricati, ma non funziona, non controlla se la classe e presente e di conseguenza se clicco di nuovo sul link mi ricarica tutto sotto.
Scusami lo so che ti sto assillando, ma non riesco a trovare una soluzione.