[jquery] onclick parametri a funzione

[cichity74]

vorrei poter passare l'id di riferimento alla finzione jquary
vedi: http://jsfiddle.net/SqaTh/

in modo da poter settare l'id di riferimento im maniera dinamica esternamente alla funzione
tipo la funzione sottostante function aa

[lucavizzi]

$(function(){
    $('.box_1').hide();
    $('#ico_1,#ico_2').toggle(
    function(){
        var box_class=$(this).attr('id').replace('ico','box'); 
        $('.'+box_class).slideDown(600); //sarebbe meglio usare un id
        $(this).attr("src","http://cdn2.iconfinder.com/data/icons/fugue/icon/toggle.png");
    },
    function(){
        var box_class=$(this).attr('id').replace('ico','box');
        $('.'+box_class).slideUp(800); 
        $(this).attr("src", "http://cdn4.iconfinder.com/data/icons/fugue/icon/toggle-expand.png");
    }
    );
});

[cichity74]

funziona ma se fossero 100?
dovrei settarli tutti staticamente nel codice della funzione tipo...

    $('.box_1,.box_2,.box_3,.box_4. etc, etc').hide();
    $('#ico_1,#ico_2,,#ico_3,,#ico_4, etc, etc').toggle(

io vorrei passare alla funzione il soggetto..

altra domanda cosa intendi per:
sarebbe meglio usare un id


Ciao
cichity74

[lucavizzi]

Se fossero 100, sarebbe il caso di usare una classe ed il metodo next():

<hr />
    1:--> 
    <div style="display:none" class="box">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta, 
        neque pulvinar placerat suscipit, erat mi commodo enim, non placerat 
        neque nisi eu purus. Nam nisl. Nullam in ipsum quis odio euismod 
        tincidunt. Nunc in tellus vitae lacus sodales volutpat.
    </div>
<hr />
    2:--> 
    <div style="display:none" class="box">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta, 
        neque pulvinar placerat suscipit, erat mi commodo enim, non placerat 
        neque nisi eu purus. Nam nisl. Nullam in ipsum quis odio euismod 
        tincidunt. Nunc in tellus vitae lacus sodales volutpat.
    </div>
<hr />

$(function(){
    $('.ico').toggle(
    function(){
        $(this).next().slideDown(600); 
        $(this).attr("src","http://cdn2.iconfinder.com/data/icons/fugue/icon/toggle.png");
    },
    function(){
        $(this).next().slideUp(800); 
        $(this).attr("src", "http://cdn4.iconfinder.com/data/icons/fugue/icon/toggle-expand.png");
    });
});

Meglio l'id sia per motivi (relativi) di performances che per come era strutturato:
class="box_1", class="box_2", class="box_3" ??
Quelli sono id non sono classi...

[cavicchiandrea]

Cosi http://webandylab.altervista.org/demo-toggle.html dovrebbe fare quello che vuoi

[cichity74]

Grazie a tutti per i preziosi suggerimenti / spiegazioni.
Una domanda "off topic" mi potreste consigliare un testo / guida x iniziare con il piede giusto con JQuery...

Ciao e grazie

[cavicchiandrea]

http://www.html.it/guide/guida-jquery/
http://www.jqueryitalia.org/

[cichity74]

Grazie per i suggerimenti...
Un ultima domanda se volessi ritardare / attendere la fine dell'evento
prima di sostitutore l'immagine???

[cavicchiandrea]

prova cosi
.slideDown(600, function(){
$(this).attr("src","http://cdn2.iconfinder.com/data/icons/fugue/icon/toggle.png");
})