Ciao ragazzi quello che sto provando a fare è un "mosaico" in cui inserisco immagini da una combo-box e una volta inserite queste immagini posso "spostare" l'immagine a dx o sx oppure eliminare un'immagine. La base sembra esserci però non mi riconosce l'azione onclick quando clicco sulla freccia a dx, a sx o quando clicco sulla X per eliminare l'immagine. Purtroppo non riesco a vedere l'errore.
vi posto il codice:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script>
<style type="text/css">
body {background: lightblue;}
table {border-collapse: collapse;}
img {width:200px; height:200px}
select, option {background: yellow;}
</style>
</head>
<body>
<table id="tabella">
<tr id="lista"> </tr>
</table>
<select id="elencoImg" onchange='aggiungi(this)'>
<option value="img/1.jpg"> 1 </option>
<option value="img/2.jpg"> 2 </option>
<option value="img/3.jpg"> 3 </option>
<option value="img/4.jpg"> 4 </option>
</select>
<script type="text/javascript">
aggiunti = 0;
function aggiungi(voceScelta){
aggiunti++;
nuovoTd="<td id='img" +aggiunti+ "'> <img src='"+ voceScelta.value + "' /> <br/> </td>";
$('#lista').append(nuovoTd); //aggiunge nuovo elemento nel punto indicato
// ...onclick="elimina('img1')"
bottoneElimina = "<button style='color:red' onclick=" +'"' + "elimina('img"+aggiunti+"')" + '"> X </button>';
bottoneSx = "<button style='color:blue' onclick="+ '"' + "spostaSx('img"+aggiunti+"')"+ '"> <- </button>';
bottoneDx = "<button style='color:blue' onclick="+ '"' + "spostaDx('img"+aggiunti+"')"+ '"> -> </button>';
// qui sopra ho scritto il testo che dovrò "appendere" per far comparire i bottoni
$("#img"+aggiunti).css('background','yellow').append(bottoneElimina).append(bottoneSx).append(bottoneDx);
sistemaBottoni();
function sistemaBottoni(){
var numeroBottoni = $('td button').length; // nBottoni= numero di bottoni presenti nella cella dell'immagine
$('td button').each(function (i){ // tante volte quanti sono i bottono presenti nella cella esegui la funzione (i)
if (i==1 || i==numeroBottoni-1)
$(this).hide();
else
$(this).show();
} );
}
function elimina(elemento){
alert(elemento);
$("#" + elemento).remove(); // remove elimina l'oggetto selezionato
}
function spostaSx(elemento){
var precedenteImg = $("#" + elemento).prev().find(':first-child').attr('src'); //prendo il primo elemento che trova nel td dell'immagine precedente e accedo all'attributo src
$("#" + elemento).prev().find('first-child').attr('src', $("#"+elemento+">img").attr('src') ); //
$("#" + elemento+">img").attr('src',precedenteImg);
}
function spostaDx(elemento){
var successivaImg = $("#" + elemento).next().find(':first-child').attr('src'); //prendo il primo elemento che trova nel td dell'immagine precedente e accedo all'attributo src
$("#" + elemento).next().find('first-child').attr('src', $("#"+elemento+">img").attr('src') ); //
$("#" + elemento+">img").attr('src',precedenteImg);
}
}
</script>
</body>
</html>
fatemi sapere se avete idee su come risolvere, grazie in anticipo