bueno este es mi problema. he estado investigando y pues he creado un "plugin" jquery. lo unico que hace el plugin es agregar un div con texto a un elemento (el texto puede ser cambiado en los argumentos) y agrega un evento a este elemento para esconder el padre. todo bien mientras lo ejecuto uno por uno sobre cada objeto con el div, pero cuando uso un selector que encapsule varios objetos deja de funcionar. que estoy haciendo mal?
este es el archivo
Código Javascript
:
Ver original(function($){
$.fn.prueba = function(options)
{
defaults={
texto:'texto default'
};
var options= $.extend(defaults,options);
var base=this;
var probador
this.mostrarTexto=function(texto){
probador=$('<div></div>');//genera el contenedor de texto
probador.html(texto);//genera el texto en el contenedor
base.html(probador);
}
this.mostrarTexto(options.texto);
probador.click(function(){
base.hide('slow');
});
}
})(jQuery);
este es el html
Código HTML:
<!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=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="jquery.bxSlider.min.js"></script>
<script src="prueba.js"></script>
<script>
$(document).ready(function(){
$('#div1').prueba();
$('#div2').prueba({
texto:'texto seteado',
});
/*$('.div').prueba();*/
});
</script>
</head>
<body>
<div id="div1" class="div" style=" width:200px; height:200px; border:1px #000 solid">
</div>
<div id="div2" class="div" style=" width:200px; height:200px; border:1px #000 solid">
</div>
</body>
</html>