jQuery Mostra/Nascondi per classe quando più elementi contengono la suddetta classe

Question

Grazie in anticipo per avermi aiutato (per coloro che hanno tempo e sono disposti).

ho scritto questo script:

$(document).ready(function() { 
    // hides the slickbox as soon as the DOM is ready 
    // (a little sooner than page load) 
    $('.foliobtn').hide(); 
    $('.folionamedate').show(); 

    // shows the slickbox on clicking the noted link 
    $('.foliobottom').mouseover(function() { 
    $('.foliobtn').show(); 
    return false; 
    }); 
    $('.foliobottom').mouseout(function() { 
    $('.foliobtn').hide(); 
    return false; 
    }); 
    $('.foliobottom').mouseover(function() { 
    $('.folionamedate').hide(); 
    return false; 
    }); 
    $('.foliobottom').mouseout(function() { 
    $('.folionamedate').show(); 
    return false; 
    }); 
}); 

e metterlo su questa pagina http://www.fraservalley-webdesign.com/portfolio/test.php.

Funziona tranne che ovviamente mostra/nasconde ogni elemento con le classi appropriate, non solo quello che sto passando sopra. Non posso nominarli in modo univoco perché ci saranno dozzine e sarà contenuto basato su database.

Qualcuno sa un modo semplice per isolare l'oggetto che sto passando sopra all'interno della sceneggiatura?

Ha senso?

Answer 1

La variabile "questo" è associata all'elemento di attivazione nei gestori mouseover e mouseout, quindi è possibile dire qualcosa come

$('.foliobtn',this).hide(); 

per nascondere gli elementi con classe "foliobtn" all'interno dell'elemento di attivazione.

Answer 2

Puoi provare questo?

$(document).ready(function() { 
    // hides the slickbox as soon as the DOM is ready 
    // (a little sooner than page load) 

    $('.foliobtn').hide(); 
    $('.folionamedate').show(); 

    // shows the slickbox on clicking the noted link 
    $('.foliobottom').mouseover(function() { $(this).show(); return false; }); 
    $('.foliobottom').mouseout(function() { $(this).hide(); return false; }); 

Answer 3

È consigliabile utilizzare il jquery bind method:

Qualcosa di simile

$(document).ready(function() { 
    // hides the slickbox as soon as the DOM is ready 
    // (a little sooner than page load) 
    $('.foliobtn').hide(); 
    $('.folionamedate').show(); 

    // shows the slickbox on clicking the noted link 
    $('.foliobottom').mouseover(function(e) { 
    $(this).find('.foliobtn').show(); 
    $(this).find('.folionamedate').hide(); 
    }); 
    $('.foliobottom').mouseout(function(e) { 
    $(this).find('.foliobtn').hide(); 
    $(this).find('.folionamedate').show(); 
    }); 
}); 

Qui non si cambia la visibilità di tutti gli elementi in base alla classe, ma trovare un elemento con questa classe, e il nodo corrente

Answer 4

È possibile utilizzare un'altra funzione come callback, che agisce effettivamente come un interruttore di sorta e semplifica il codice.

dare a questo un colpo:

$(document).ready(function() { 

    // hides the slickbox as soon as the DOM is ready 
    // (a little sooner than page load) 
    $('.foliobtn').hide(); 
    $('.folionamedate').show(); 

    // shows the slickbox on clicking the noted link 
    $('.foliobottom').hover(function() { 
    $(this).find('.foliobtn').show(); 
    }, function() { 
    $(this).find('.foliobtn').hide(); 
    }); 

}); 

Inoltre, non è necessario return false in questo caso perché il browser non ha alcun comportamento predefinito per questo elemento.

return false è più appropriato per qualcosa come click per un <a> o di un modulo di invio, ma in realtà si sarebbe probabilmente desidera utilizzare preventDefault() invece.