Visualizzazione dei risultati da 1 a 5 su 5

Discussione: tooltip items in loop

  1. #1
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    52

    tooltip items in loop

    Salve, ho questo codice che in poche parole quando clicchi sull'immagine genera un tooltip a comparsa e a chiusura tramite click. Su di una immagine sola funziona correttamente.
    Ora io dovrei generare tramite ciclo php tante immagini diverse, ed ogni immagine avrà la sua descrizione.
    Cosa dovrei fare per farlo funzionare dinamicamente su tante immagini? Dovrei inserire un id? Ma come?

    codice HTML:
    <a href="javascript:void(0)" class="mostra"><img src="/images/items/item1.png" /></a>
        
        <div class="tooltip">Contenuto da mostrare
        <button class="chiudi">X</button>
        </div>
    codice HTML:
    <script type="text/javascript">
      $(document).ready(function () {
      $('.tooltip').fadeOut(0);
      $('button.chiudi').click(function (e) {
        e.preventDefault();
        $('.tooltip').fadeOut();
      });
      $('a.mostra').click(function (e) {
        e.preventDefault();
        $('.tooltip').fadeIn();
      });
    });
        </script>

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, non serve usare degli id in questo caso, anzi è più comodo usare delle classi così come già fa quello script. In teoria dovrai quindi usare dei metodi che agiscono in modo relativo tra i vari elementi, cioè ad esempio ogni tooltip dovrà in qualche modo essere riconducibile al proprio elemento immagine. Sostanzialmente dovrai studiarti come strutturare la relazione tra i vari elementi in gioco. In pratica ogni elemento a.mostra deve poter "selezionare" il proprio elemento .tooltip per poterlo aprire correttamente.

    Un sistema potrebbe essere quello di assegnare una certa sequenza tra i vari elementi. Supponendo, ad esempio, di stabilire che l'elemento div.tooltip sia posto sempre a seguire l'elemento a.mostra, puoi quindi identificare il tooltip, relativo all'elemento .mostra cliccato, attraverso un qualsiasi metodo che "selezioni" l'elemento .tooltip appena successivo all'elemento stesso su cui si è cliccato.

    Analogamente, per il pulsante .chiudi puoi usare un metodo che selezioni l'elemento genitore del pulsante stesso che è stato cliccato.

    Non è semplice spiegarlo ma è importante capire il concetto di "selezionare" (e quindi identificare) un elemento in base ad un riferimento relativo, a partire da un elemento che ne determina il contesto.

    Ora, nel tuo esempio potresti adoperare il selettore jQuery in questo modo:
    codice:
    $('+.tooltip',this)
    inserito dentro la funzione di gestione del click per poter selezionare il tooltip relativo all'immagine stessa. La parola chiave this identifica infatti l'elemento stesso "a.mostra" per il quale è definito l'evento click, ed è usato in questo caso come contesto del selettore stesso. La stringa "+.tooltip" rappresenta infatti un selettore (esattamente come per il CSS) dove il segno "+" indica di selezionare il "fratello prossimo" che segue l'elemento dichiarato come contesto (il this).

    Questo metodo quindi restituisce sostanzialmente l'elemento .tooltip successivo all'elemento .mostra cliccato.

    Per il pulsante .chiudi invece puoi usare il metodo parent() (jQuery) in modo da selezionare l'elemento genitore dell'elemento cliccato (cioè del pulsante), in un modo del genere:
    codice:
    $(this).parent()
    .
    Lo script potrebbe quindi essere rielaborato in questo modo:
    codice:
    $(document).ready(function () {
      $('.tooltip').fadeOut(0);
      $('button.chiudi').click(function (e) {
        e.preventDefault();
        $(this).parent().fadeOut();
      });
      $('a.mostra').click(function (e) {
        e.preventDefault();
        $('+.tooltip',this).fadeIn();
      });
    });
    .
    Chiaramente la cosa può essere risolta in svariati altri modi.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    52
    grazie 1000 molto chiaro e disponibile.
    E se volessi tipo far aprire un tooltip alla volta? Tipo se clicco sulla seconda immagine mentre è aperto il primo tooltip dovrebbe chiudersi da solo

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Puoi applicare il fadeOut per il tooltip di tutti gli altri elementi tranne per quello su cui hai cliccato, il quale applichi invece il fadeIn.

    Molto sinteticamente puoi modificare l'ultima riga (quella dentro il click) del precedente script, in questo modo:
    codice:
    $('.tooltip').not( $('+.tooltip',this).fadeIn() ).fadeOut();
    Che tradotto in umanese significa sostanzialmente: seleziono tutti i .tooltip tranne quello relativo all'elemento appena cliccato (a cui applico al volo il fadeIn) quindi applico a questi il fadeOut.

    Buon proseguimento
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    May 2017
    Messaggi
    52
    grazie per l'aiuto. tutto funziona bene

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.