[Jquery] selezionare un div+variabile

**evan75** · 18-12-2009, 08:01

buon giorno,

Vorrei sapere come si fà a selezionare un div + variabile.

esempio:
anziché scrivere cosi:

$('#pippo2')

$('#pippo'+a)

dove var a=2;

questo è il mo codice (una minima parte..)

Codice PHP:


$(document).ready(function(){



      $('#container div').click(function () {

      

      var a =this.id;

      var b = a.slice(-1);

      alert(b);  

     

       });



  });

vorrei scrivere una cosa del genere:

Codice PHP:


$(document).ready(function(){



      $('#container div').click(function () {



          var a =this.id;

      var b = a.slice(-1);

          $('#pippo'+b).prependTo('#pippo1'); 

       

     

       });



  });

dovrebbe succedere questo: quando premo un div qualsiasi all'intenrno del div container, il conenuto del div selezionato va a sostituire il contenuto del pippo1 (manca l'hide al div #pippo1)

dove sbaglio? esiste un modo per scriverlo?
(premetto che sto scrivendo tutto il codice da zero e ho iniziato a toccare jquery solo qualche giorno fa'... il codice farà probabilmente rizzare i capelli ai coder qui presenti, ma siccome ho delle scadenze tirate, l'importante per ora è che tutto funzioni..

)

Ringrazio anticipatamente tutti coloro che leggeranno questo post e per il tempo che mi dedicheranno.

**m4rko80** · 18-12-2009, 10:56

ciao, non ho capito che devi fare con slice non conoscendo come sono i tuoi id pero' $('#pippo'+b) non e' sbagliato , si puo concatenare cosi' per completare una stringa.
cos'e' che non va?

**evan75** · 18-12-2009, 15:13

Innanzitutto grazie M4rco80 per la tua risposta.
ho scritto in 2 minuti una pagina con js inclusi e niente css
(giusto per avere i div id)

se uso il codice riportato qui di seguito, vorrei swappare il contenuto dei due div.
Per il momento mi accontenterei di avere il contenuto del div pippo2 spostato nel contenuto del div1
il codice qui sotto funziona ma genera un errore in firebug (aNode is null)
io vorrei scrivere anziché
--> $('#pippo2').prependTo('#pippo1');
--> $('#pippo'+b).prependTo('#pippo1');

dove sbaglio?

Codice PHP:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>



<script type="text/javascript" src="jquery-1.3.2.min.js"></script>



<script type="text/javascript">

 $(document).ready(function(){



      $('#container div').click(function () {

      $('#pippo2').prependTo('#pippo1');

      var a =this.id;

      var b = a.slice(-1);

     alert(b);  

     

     });



  });



</script> 

</head>



<body>



<div id="container">

  <div id="pippo1">premi qui1</div>

  <div id="pippo2">premi qui2</div>

</div>



</body>

</html>

grazie ancora.

**m4rko80** · 18-12-2009, 15:30

Ciao, per farla sbrigativa con 2 soli div questo funziona

$('#container div').click(function () {

if( $('#container div').eq(0).attr('id')== this.id ){
$(this).appendTo('#container');
}else{
$(this).prependTo('#container');
}

});

per più div va modificato un po... vedi tu

PS quello che hai messo sopra si blocca perche' se guardi la sorgente(io uso firebug) vedi che cambia l html..... il div cliccato finisce dentro all altro

**evan75** · 18-12-2009, 16:39

grazie marko per la tua risposta.
Il mio progetto pero' e' un po' piu' complicato. se hai tempo e voglia ti riporto una breve spiegazione.

--> Ho una struttura (chiamiamola struttura display) con 5 div vuoti--> 4 ai lati e uno al centro (immagina il n5 di un dado)

il div al centro e' molto piu grande e serve come display per i contenuti
i 4 div ai lati sono dei pulsanti

il problema pero' e' che io ho :

5 contenuti
5 grafiche (pulsanti)

che vengono posizionati tramite jquery nei rispettivi boxdisplay.

esempio: chiamiamo i div display "box"

box1 --> graphic1(pulsante)
box2 --> graphic2(pulsante)
box3 --> graphic3(pulsante)
box4 --> graphic4(pulsante)

la box5 e' al centro ed e' piu grande--> CONTENT5

se premo su box1, il contenuto di box 1 (in questo passaggio e' graphic1) attiva il content1 che si posiziona al centro e il content 5 si posiziona al box1 diventando box1 -->graphic5
e fino a qui sono riuscito a farlo. il problema e' il secondo passaggio--> come faccio a sapere che ora il box1 contiene il content5?

per quello ho pensato ad uno slice sia di graphic che di content dando due variabili A e B

Il mio ragionamento:
--> se premo box1 > graphic + A box5(centrale) > content+B.hide: content+A.show():

ripeto questo per le 4 box e ho fatto.
(io sono un grafico, mi destreggio bene con html e css, ma e' la prima volta che tocco jquery, percio' se poteste commentare ogni riga sarebbe fantastico, cosi potrei capire e non solo applicare quello che sto facendo)
sto studiando da zero l-argomento, e finche' fai le cose che ti dicono o modifichi qualcosina e' semplice, ma quando devi scrivere una cosa da zero per me e' abb complicato al momento

)

Grazie M4rco80!

**m4rko80** · 18-12-2009, 16:55

ma il funzionamente e' una cosa cosi'?

<div id="container">
<span id="1"><input type="button" value="1"></span>
<span id="2"><input type="button" value="2"></span>
<span id="5" ><input type="button" value="5"></span>
<span id="3"><input type="button" value="3"></span>
<span id="4"><input type="button" value="4"></span>
</div>

$('#container span').click(function () {

var box5 = $('#5').html();
var boxSel = $(this).html();

$('#5').html(boxSel);
$(this).html(box5);

});

ps io ho usato altri tag per non metterci css

con "come faccio a sapere che ora il box1 contiene il content5?" cosa intendi... a cosa ti serve sapere cos'hai spostato?

**evan75** · 18-12-2009, 17:13

scusa marco ma non ti seguo moltissimo. sono proprio principiante in jquery.
ti faccio vedere il codice che ho usato:
ti mostro solo il codice per il tasto del box1.. gli altri sono solo copia incolla.

se uso i numeri anziche' le variabili tutto funziona alla perfezione.
Ps qui al lavoro non ci fanno installare nulla e usiamo ancora IE 7!!!!! (non ho nessun supporto da firebug)
posso guardare a casa con ff ma vorrei nella piu rosea delle mie aspettative farcela entro oggi..
se pensi che il mio codice sia sbagliato, potresti commentare il perche' e commentare il tuo codice per piacere? grazie ancora, mi stai dando una mano enorme!!!

Codice PHP:


// JavaScript Document





$(document).ready(function() {

                           

$("#menu div").click(function() {  /* if you click ONLY the element DIV whithin the div #container */

    var myDiv =  this.id;                   /* you get the ID of the div */

    var myDivNum = myDiv.slice(-1);         /* you get the last character of the ID of the div */

    alert (myDivNum);                       /* if everything works you get an alert message */

                

    })

    $("#content div").click(function() {  /* if you click ONLY the element DIV whithin the div #container */

    var myDivA =  this.id;                   /* you get the ID of the div */

    var myDivNumA = myDivA.slice(-1);         /* you get the last character of the ID of the div */

    alert (myDivNumA);                       /* if everything works you get an alert message */            

        

    })



$("#graphic1").css({display: 'none'});

$("#graphic2").css({display: 'none'});

$("#graphic3").css({display: 'none'});

$("#graphic4").css({display: 'none'});

$("#graphic5").css({display: 'none'});



$("#content1").css({display: 'none'});

$("#content2").css({display: 'none'});

$("#content3").css({display: 'none'});

$("#content4").css({display: 'none'});

$("#content5").css({display: 'none'});





$(document).ready(function(){

$("#graphic1").css({display: ''});

$('#box1').prepend($("#graphic1"));



$("#graphic2").css({display: ''});

$('#box2').prepend($("#graphic2"));



$("#graphic3").css({display: ''});

$('#box3').prepend($("#graphic3"));



$("#graphic4").css({display: ''});

$('#box4').prepend($("#graphic4"));



$("#content5").show('slow');

$('#block2').prepend($("#content5"));



});





 $("#box1").click(function () { 

      $('#content'+myDivNumA).hide('slow');

      $('#graphic'+ myDivNum).hide();

      

      $('#graphic'+ myDivNumA).show();

      $('#box1').prepend($('#graphic'+myDivNumA));



      $('#content'+ myDivNum).show('slow');

      $('#block2').prepend($("#content1"));

      return false;

    });



});

**m4rko80** · 18-12-2009, 17:25

....allora... intanto di $(document).ready(function() { ne basta uno che contiene tutto ma non e' grave..

se il codice e' cosi' e se non ho capito male forse il problema sta nel fatto che quello variabili stanno come in metodi separati e non esistono all interno degli altri "bind"... se li usi staici tipo :

5 al posto di myDiv(che sarebbe 5) funziona da quello che ho capito.

ho unifichi il codice oppure potresti mettere i valori in campi hidden cosi da riprenderli da dove vuoi.

**evan75** · 18-12-2009, 17:50

....allora... intanto di $(document).ready(function() { ne basta uno che contiene tutto ma non e' grave..

hai ragione.. Fattto!

se il codice e' cosi' e se non ho capito male forse il problema sta nel fatto che quello variabili stanno come in metodi separati e non esistono all interno degli altri "bind"... se li usi staici tipo :

5 al posto di myDiv(che sarebbe 5) funziona da quello che ho capito

si il codice e' quello che ho scritto.
e si se usi il 5 al posto di myDivNum funziona.

ho unifichi il codice oppure potresti mettere i valori in campi hidden cosi da riprenderli da dove vuoi.

non ho capito come fare qui.. potresti gentilmente farmi un esempio (commentato sarebbe perfetto

)

grazie!

**m4rko80** · 18-12-2009, 17:50

quindi in teria potresti provare a fare(sempre che debba essere cosi')

Codice PHP:




$("#menu div").click(function() {  /* if you click ONLY the element DIV whithin the div #container */

    var myDiv =  this.id;                   /* you get the ID of the div */

    var myDivNum = myDiv.slice(-1);         /* you get the last character of the ID of the div */

    $('#hidden_myDiv').val(myDiv); //<input type="hidden" id="hidden_myDiv" value="" />

    alert (myDivNum);                       /* if everything works you get an alert message */

                

    })

    $("#content div").click(function() {  /* if you click ONLY the element DIV whithin the div #container */

    var myDivA =  this.id;                   /* you get the ID of the div */

    var myDivNumA = myDivA.slice(-1);         /* you get the last character of the ID of the div */

    alert (myDivNumA);                       /* if everything works you get an alert message 

*/            

    $('#hidden_myDivNumA').val(myDivNumA); //<input type="hidden" id="hidden_myDivNumA" value="" />

        

    }) 









$("#box1").click(function () {





//e qui poi...



var myDivNum = $('#hidden_myDiv').val();

var myDivNumA = $('#hidden_myDivNumA').val();



      $('#content'+myDivNumA).hide('slow');

      $('#graphic'+ myDivNum).hide();

      

      $('#graphic'+ myDivNumA).show();

      $('#box1').prepend($('#graphic'+myDivNumA));



      $('#content'+ myDivNum).show('slow');

      $('#block2').prepend($("#content1"));

      return false;

    });



});

Discussione: [Jquery] selezionare un div+variabile

Strumenti discussione

Ricerca discussione

Visualizza

[Jquery] selezionare un div+variabile

Permessi di invio