Pasar parámetros a una función

[pcarvajal]

Lo que estoy tratando de hacer es pasarle una "id" a una función jquery desde el onclick de un enlace.

El código base que funciona y que estoy tratando de modificar es el siguiente:

Código HTML:

<a id="target_anchor1" href="#" title="XXXXXXXXXX">test 1</a>


<script type="text/javascript">
 $(function () {
     $('#target_anchor1').flyout({
    title: '', 
    content: function() {
        return document.getElementById('target_anchor1').title;
    },
    html: true,
    dismissible: true
     });
});
</script> 

¿Pero que pasa si tengo 100 enlaces? Tendría que generar 100 llamadas para cada uno de ellos y esa no es la idea... Así entonces, generé una función que recibiera la id del elemento y generara automáticamente el flyout, pero si bien recibe el parámetro, no me lo crea.

Código HTML:

<a id="target_anchor1" href="#" title="XXXXXXXXXX" onclick="anchorFlyout(this.id)">test 1</a>
<a id="target_anchor2" href="#" title="YYYYYYYYYY" onclick="anchorFlyout(this.id)">test 2</a>
<a id="target_anchor3" href="#" title="ZZZZZZZZZZ" onclick="anchorFlyout(this.id)">test 3</a>

<script type="text/javascript">
function anchorFlyout(paramId) {
alert(paramId);
$('#'+paramId).flyout({
    title: '',
    content: function() {
       return document.getElementById('#'+paramId).title;
    },
    html: true,
    dismissible: true
});
}
</script> 

Tomé como base este script y librerias Flyout

Alguna idea?

[Alexis88]

El método document.getElementById() no trabaja con el # para seleccionar elementos por su identificador. Eso funciona con el método document.querySelector(); aunque es poco coherente que estés utilizando la librería jQuery y decidas seleccionar elementos con código JavaScript nativo cuando tranquilamente puedes hacerlo así: $("#elId"). Incluso debería funcionar de la forma $(this) ya que está dentro del contexto; pero no sé cómo funciona el widget .flyout(), de manera que solo te queda probar con ambas para ver cuál funciona.

[jeremiselxi]

Buenas tardes.

A mi me funcionó de esta manera.

Código HTML:

<a id="target_anchor1" class="anchor" href="#" title="XXXXXXXXXX" >test 1</a>
<a id="target_anchor2" class="anchor" href="#" title="YYYYYYYYYY" >test 2</a>
<a id="target_anchor3" class="anchor" href="#" title="ZZZZZZZZZZ" >test 3</a>
 

Código Javascript:

<script type="text/javascript">
$(function() {
$( ".anchor" ).click(function() {
    $(this).flyout({
        title: '',
        content: $(this).attr("title"),
        html: true,
        dismissible: true
    });  
 
});
});
</script>
 

[pcarvajal]

gracias muchachos por sus respuestas.

Alexis88, intentaré con alguna de las maneras que me indicas.

jeremiselxi, probé tu código, pero me pasan dos cosas:

1. Extrañamente el flyout funciona la primera vez sólo al hacer doble click en el enlace, luego de eso, funciona con un click simple.
2. El flyout solo desaparece si le haces click a otro enlace, y no al enlace que lo generó, o bien, no desaparece, no se si me explico.

[pcarvajal]

alguien podría hecharme una manito por favor?

[jeremiselxi]

Iniciado por pcarvajal

alguien podría hecharme una manito por favor?

Voy a verificar y te comento