Salve a tutti, ho scritto una funzione in jquery, in cui cerca un elemento "<a>" nel dom del html, in cui all'interno è contenuta un elemento immagine, ad esempio
a id="slider" class="myslider" href="#"><img id="slider" class="slider img-responsive" style="display: block; margin-left: auto; margin-right: auto;" src="functioneditor/anteprimaSlider.jpg" data-slider="["1465830611.9202.jpg","1466172204.7843.jpg","1466172210.5232.jpg"]"></a>
questo elemento contiene un data attribute con dentro il path di immagini, che saranno da inserire dinamicamente in uno slider con la funzione qua sotto, e lo slider andrà a sostituire l'elemento <a>.
La funzione và senza problemi con uno slider, ma quando inserisco più slider mi cambio il contenuto di un solo slider e gli altri elementi <a> li cancella solo insieme all'immagine che contiene gli attributi, c'è un modo di generare tutti gli slider modificando questa funzione?
<script type="text/javascript">
$(document).ready(function() {
var stuff = $('img').data('slider');
var slider = '<div id="myCarousel" class="carousel slide" data-ride="carousel">';
slider = slider+'<div class="carousel-inner" role="listbox">';
for (var i=0; i<stuff.length; i++) {
if(i ==0){
slider = slider +'<div class="item active"><img src="../users/'+stuff[i]+'" ></div>';
}
else{
slider = slider +'<div class="item "><img src="../users/'+stuff[i]+'" ></div>';
}
}
slider = slider +'<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Indietro</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Avanti</span></a></div>';
$('a.myslider').replaceWith(slider);
});
</script>