funzioni javascript in un loop

[manu-oswald]

Ciao a tutti,
dovendo introdurre una feature nel mio sito WordPress ho dovuto creare delle funzioni Javascript, semplicissime, relative soltanto all'hover del mouse. Ho due elementi div, che devono essere mostrati alternativamente. Il problema è che questi elementi sono all'interno di un loop che pesca tutti i pezzi per x volte, e il risultato è che all'hover di ognuno di questi elementi all'interno dell'intera pagina viene azionato sempre l'hover del primo elemento. Dovrei cercare di aggiungere un id alle mie funzioni relativo all'intero blocco (suppongo), ma come? Ho fatto varie prove e non mi portano a nulla purtroppo.. Chiedo scusa se la mia domanda è banale, ma ho iniziato recentemente l'approccio al javascript

Qui il mio script

<script type="text/javascript">
function mouseoverElement1(){
var display = document.getElementById("element1");
display.style.display = "none";
}
function mouseoutElement1(){
var display = document.getElementById("element1");
display.style.display = "block";
}
function mouseoverElement2(){
var display = document.getElementById("element2");
display.style.display = "block";
}
function mouseoutElement2(){
var display = document.getElementById("element2");
display.style.display = "none";
}
</script>

E qui il codice html che le richiama

<div onmouseover="mouseoverElement1(); mouseoverElement2();" onmouseout="mouseoutElement1(); mouseoutElement2();">
<div id="element1" style="display: block;">This one is the first element</div>
<div id="element2" style="display: none;">This one is the second element</div>
</div>


Riuscireste a darmi qualche dritta?
Grazie!

[KillerWorm]

Ciao, sinceramente non ho ben capito cosa ti serve esattamente.
Quale è il contesto in cui stanno questi div?
Cosa intendi per "devono essere mostrati alternativamente"?
Cosa intendi per "questi elementi sono all'interno di un loop che pesca tutti i pezzi per x volte"?
Cosa sarebbero questi "pezzi"?

Probabilmente ti può essere utile l'uso dell'istruzione this, e nel caso puoi creare un'unica funzione "riutilizzabile" per i diversi elementi, ma non capisco cosa vuoi ottenere di preciso.
Puoi chiarire meglio?

[manu-oswald]

Ciao KillerWorm, mi scuso per la confusione, provo a spiegarmi meglio.
Ho aggiunto quei div al blocco di codice che genera la preview di ciascun post in homepage del sito, quindi sono posti sotto a titolo, thumbnail e descrizione. Questo codice per la preview del post è tutto in un singolo file .php che viene richiamato per x volte (x=numero di preview da mostrare) da un altro file .php.
i div dei quali parlavo sono due: uno (nel mio esempio quello con id element1) deve essere mostrato normalmente e nascosto all'hover, l'altro (element2) deve invece essere nascosto normalmente e comparire all'hover al posto del primo, "prendendo il suo posto".
Tutto fila liscio e funziona correttamente, se parliamo esclusivamente della prima preview. Se vado con il mouse sopra al div element1 della seconda o della terza preview visualizzo il div element2 sempre nella prima preview.
Ho provato l'utilizzo dell'istruzione this, ma probabilmente sbaglio qualcosa perché nessuna prova mi da i risultati sperati.
Spero di aver chiarito il mio problema.
Grazie!

[KillerWorm]

Ciao, è già qualcosa in più, inizio a capire maggiormente la situazione anche se il quadro non è completo.
Dovrei vedere cosa produce esattamente quel loop.

Ad intuito mi pare di capire che ci possa essere un problema di id duplicati.
Tieni presente che all'interno dello stesso documento html (la pagina risultante dal tuo php) gli id dei vari elementi devono sempre essere univoci. Mi sorge il dubbio che non lo siano, da quanto hai indicato qui:

Il problema è che questi elementi sono all'interno di un loop che pesca tutti i pezzi per x volte, e il risultato è che all'hover di ognuno di questi elementi all'interno dell'intera pagina viene azionato sempre l'hover del primo elemento

Ad ogni modo puoi procedere col this, come accennato sopra, (o altre istruzioni come parent, che fanno riferimento agli elementi in modo relativo) in maniera che si faccia riferimento all'elemento in cui sta avvenendo l'hover.
Posso provare a buttar giù un esempio.
Fammi capire però una cosa: se nella pagina è inclusa la libreria jQuery può risultare più semplice adoperare questa (non che non lo si possa fare solo con JavaScript standard). Possiamo usare jQuery?

[manu-oswald]

Possiamo eccome
Ogni blocco div contenitore della singola preview possiede un id univoco, ma non posso dire lo stesso per quanto riguarda i div contenuti al suo interno (che, banalmente, sono uno per il titolo, uno per l'immagine, uno per la descrizione e poi quelli dei quali stiamo parlando in questa discussione) dove non è presente alcun id ma una serie di classi.

[KillerWorm]

Possiamo eccome

Bene.

Ogni blocco div contenitore della singola preview possiede un id univoco, ma non posso dire lo stesso per quanto riguarda i div contenuti al suo interno

Dovrai comunque assicurarti che qualsiasi id sia univoco dentro il tuo documento, a prescindere dall'uso che ne fai. In alternativa si utilizzano, appunto, le classi.

Ti posto un esempio con jQuery. Fammi sapere se, più o meno, è quello che intendevi o se ti serve altro:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
      /* giusto un po' di style */
      .switchbox{
        margin:5px;
        padding:10px;
        width:500px;
        height:50px;
        background:Tan;
      }
      .element1{
        background:Orange;
      }
      .element2{
        background:Beige;
      }
    </style>
    <script type="text/javascript">
      $(function(){
        $(".switchbox").hover(function(){                           // all'evento hover (in e out) del div contenitore
          $(".element1,.element2",this).stop().slideToggle(150);    // applico il toggle ai due elementi figli
        }).children(".element2").hide();                            // nascondo inizialmente il secondo elemento
      })
    </script>
  </head>
  <body>
    <div class="switchbox"> BOX 1
      <div class="element1">This one is the first element</div>
      <div class="element2">This one is the second element</div>
    </div>
    
    <div class="switchbox"> BOX 2
      <div class="element1">This one is the first element</div>
      <div class="element2">This one is the second element</div>
    </div>
        
    <div class="switchbox"> BOX N
      <div class="element1">This one is the first element</div>
      <div class="element2">This one is the second element</div>
    </div>
  </body>
</html>

[carlomarx]

Non so voi, ma quando si tratta di animazioni e grafica io non scomoderei JavaScript…

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<style type="text/css">
    .switchbox {
        position: relative;
        margin: 5px;
        padding: 10px;
        width: 500px;
        height: 200px;
        background: Tan;
    }

    .switchbox .element1,
    .switchbox .element2 {
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        overflow: auto;
    }

    .switchbox .element1,
    .switchbox:hover .element2 {
        height: 180px;
    }

    .switchbox .element1{
        background: Orange;
    }

    .switchbox .element2{
        background: Beige;
        height: 0px;
        overflow: hidden;
        transition: height .5s;
    }
</style>
</head>

<body>

<div class="switchbox"> BOX 1
    <div class="element1">This one is the first element</div>
    <div class="element2">This one is the second element</div>
</div>

<div class="switchbox"> BOX 2
    <div class="element1">This one is the first element</div>
    <div class="element2">This one is the second element</div>
</div>
        
<div class="switchbox"> BOX N
    <div class="element1">This one is the first element</div>
    <div class="element2">This one is the second element</div>
</div>

</body>
</html>

[manu-oswald]

Ciao carlomarx, grazie per la risposta, mi piace molto la tua soluzione (grazie mille anche a KillerWorm, in effetti la mia domanda era mirata al Javascript e lui mi ha dato un'ottima risposta).
Vorrei chiederti un'ultima cosa: siccome all'hover element1 dovrebbe scomparire mentre dovrebbe comparire element2 ho modificato il css della tua classe relativa all'hover dividendo i due elementi. Ecco qui quello che fa al caso mio:

.switchbox:hover .element2 {
height: 180px;
}
.switchbox:hover .element1 {
height: 0px;
}

Va tutto alla grande, se non fosse che...non viene interpretato correttamente da Internet Explorer!
Succede che quando passo con il mouse sopra a switchbox si nasconde correttamente element1 e compare correttamente element2, ma il problema è che quest'ultimo non resta fisso, continua a lampeggiare, come se IE "non fosse sicuro che deve farlo visualizzare".
Sai se qualche stile di questi non gli piace? Secondo me è l'height:0, ma anche se fosse non saprei come rimpiazzarlo (se non con display:none e overflow:hidden, prove non andate a buon fine)
Ti ringrazio

[carlomarx]

Figurati!
Il punto è che esistono mille possibili soluzioni e io non posso sapere cosa preferisci di preciso! Da' uno sguardo qua:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<style type="text/css">
    .switchbox {
        position: relative;
        margin: 5px;
        padding: 10px;
        width: 500px;
        height: 200px;
        background: Tan;
    }

    .switchbox .element1,
    .switchbox .element2 {
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        overflow: auto;
    }

    .switchbox .element1,
    .switchbox:hover .element2 {
        height: 180px;
    }

    .switchbox .element2 {
        height: 0px;
        overflow: hidden;
    }

    .switchbox:hover .element1 {
        opacity: 0;
    }

    .switchbox .element1{
        background: Orange;
        opacity: 1;
        transition: opacity .2s linear;
    }

    .switchbox .element2{
        background: Beige;
        transition: height .5s;
    }

</style>
</head>

<body>

<div class="switchbox"> BOX 1
    <div class="element1">This one is the first element</div>
    <div class="element2">This one is the second element</div>
</div>

<div class="switchbox"> BOX 2
    <div class="element1">This one is the first element</div>
    <div class="element2">This one is the second element</div>
</div>
        
<div class="switchbox"> BOX N
    <div class="element1">This one is the first element</div>
    <div class="element2">This one is the second element</div>
</div>

</body>
</html>

Ma magari non è quello che vuoi… Io non lo posso sapere!

[manu-oswald]

Ciao carlomarx, e grazie come sempre.
Esordisco dicendoti che il tuo codice è perfetto, funziona perfettamente in ogni browser e (ovviamente stile a parte) è esattamente quello che mi serve. Il mio attuale problema è che se inserisco il tuo codice all'interno dei file del mio sito ho dei problemi di visualizzazione con IE, nonostante non ne abbia con nessun altro browser. Quello che succede è che all'hover del mouse compare il secondo elemento, ma quando muovo il mouse, sempre all'interno dello stesso elemento, questo continua a lampeggiare vistosamente e fastidiosamente durante tutto il movimento.
Ho provato anche il codice Javascript di KillerWorm, anch'esso perfetto, ma ottengo lo stesso identico risultato.
Non so se può aiutarti, ma ti dico che all'interno di element2 sono presenti tre bottoni per effettuare lo share nei tre maggiori social network (non è un plugin, sono solo i tre singoli bottoni presi dai relativi siti nella sezione developer), e non vorrei che qualcuno dei loro relativi stili dia in qualche modo fastidio a IE... La mia domanda è: generalmente, c'è qualche stile che notoriamente potrebbe scontrarsi con quelli dati all'hover in IE?