Associare una stessa funzione get a due eventi a.click con classi differenti

Stato
Chiusa ad ulteriori risposte.

Domenico_Falco1

Nuovo Utente
27 Mag 2019
26
0
1
Buona sera :)

Vado subito al dunque, ho dei link che sono dentro ad una pagina dinamica che richiamo con una funzione get di ajax, un link è dentro ad un div ed ha class = "pulsanti" e l'altro è associato ad una immagine ed ha class = " pulsanti2". cioè così :

HTML:
<div class="pulsante1g"><a class="pulsanti" href="PRESENTAZIONE.php">Chi Siamo</a></div>

e l'altro :

Codice:
<div class ="scheda1ig"><a class="pulsanti2" href="PRESENTAZIONE.php"><img src="CHISIAMO.gif" alt="azienda" title="Titolo della foto"></a></div>

e funzionano con le rispettive funzioni evento :

Codice:
$('a.pulsanti').click(function(event) {
        
            if (history && history.pushState) {     
                //Inserisce la nuova pagina nella history del browser
                history.pushState(null, document.title, $(this).attr('href'));
                    
                    //Richiama la nuova pagina attraverso una chiamata ajax
                    $.get($(this).attr('href'), {ajax:'1'}, function(data, text, xhr) {
                        $('#container').html(xhr.responseText);
                    });
                
                event.preventDefault();   
            
         }
     });

   $('a.pulsanti2').click(function(event) {
  
            if (history && history.pushState) {     
                //Inserisce la nuova pagina nella history del browser
                history.pushState(null, document.title, $(this).attr('href'));
                    
                    //Richiama la nuova pagina attraverso una chiamata ajax
                    $.get($(this).attr('href'), {ajax:'1'}, function(data, text, xhr) {
                        $('#container').html(xhr.responseText);
                    });
                
                event.preventDefault();   
            
         }
     });

che tengo scritti nella stessa pagina chiaramente, ed hanno un markup differente, mi chiedevo se c'è un modo di scrivere la stessa funzione per entrambi e non per ognuno di essi.
 
hai provato ad aggiungere una doppia classe uguale per entrambi ?
tipo
class="pulsanti pulsante1"
class="pulsanti pulsante2"
il nome uguale lo usi x javascript,
il nome diverso per il markup

fai sapere
 
Buon giorno Marino, grazie della risposta e chiaramente collaudata e funziona benissimo.

Riporto il codice per una maggiore comprensione di tutti, quindi ammettiamo che abbiamo due button, si avrà :

HTML:
<div class="container-pulsantig">   

<div class="pulsante1g"><a class="pulsantig pulsar" href="INDEX.php">Home</a></div>
</div>

<div class="container-pulsanti">
<div class="pulsante1"><a class="pulsanti pulsar" href="INDEX.php">Home</a></div>
</div>

<script>

 $('a.pulsar').click(function(event) {
                
            if (history && history.pushState) {     
                //Inserisce la nuova pagina nella history del browser
                history.pushState(null, document.title, $(this).attr('href'));
                    
                    //Richiama la nuova pagina attraverso una chiamata ajax
                    $.get($(this).attr('href'), {ajax:'1'}, function(data, text, xhr) {
                        $('#container').html(xhr.responseText);
                    });
                
                event.preventDefault();   
            
         }
     });

</script>

Praticamente due classi per una gestione responsive del sito e quindi con markup diverso, ma con la stessa classe per l'attivazione dello script ajax.
Ancora grazie e saluti.

P.s. : La gentilezza apre tutte le porte.
 
Salve, condivido pienamente il consiglio di marino51 nell'uso di una classe che accomuni gli elementi da gestire via script, soprattutto come buona pratica per avere una migliore gestibilità del codice. In alternativa si può comunque impostare opportunamente il selettore jquery in modo da selezionare elementi con diverse classi.

In tal senso è possibile usare la virgola in modo da ottenere dei gruppi di selettori, proprio come si fa con i css.

Riportandolo al tuo esempio:
Codice:
<a class="pulsantig">Home</a>
<a class="pulsanti">Home</a>

<script>
     $('a.pulsantig,a.pulsanti').click(...);
</script>
Il selettore 'a.pulsantig,a.pulsanti' quindi pesca contemporaneamente tutti gli elementi <a> con classe pulsantig e tutti gli elementi <a> con classe pulsanti.
 
Buona sera WmbertSea e grazie davvero, oggi ho imparato due cose che mi saranno sicuramente utili in futuro :)

Ancora grazie di cuore ed ottima serata.

Saluti
 
Stato
Chiusa ad ulteriori risposte.

Discussioni simili