¿Cómo hago para no tener que repetir por cada div un ID?

[ceaped]

Buenos días
Tengo este código:

Código Javascript:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){       
$("#stay-target-1,#stay-target-2,#stay-target-3").ezpz_tooltip({
contentPosition: 'belowStatic',
stayOnContent: true,
offset: 0
});
 
});
</script>
 

Pero cada vez que agrego un ID debo agregar "#stay-target-1, #stay-target-2...etc"
Hay alguna forma de sólo agregar un "#stay-target-1" y no tener que repetirlo?

Gracias por su ayuda

[MaNuX0218]

Puedes utilizar class.

Código Javascript:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){       
    $(".stay-target-1").ezpz_tooltip({
    contentPosition: 'belowStatic',
    stayOnContent: true,
    offset: 0
    });
     
    });
    </script>
 

Saludos.

[ceaped]

Hola MaNuX0218
No puedo pues mira como tengo el botón:

Código HTML:

<div class="stay-tooltip-target tooltip-target" id="stay-target-1"></div>
 

El toolTip:

Código HTML:

<div class="stay-tooltip-content tooltip-content marco_tooltip" id="stay-content-1"></div>
 

No puedo agregarle una "class".

¿Hay alguna forma de hacerlos en el javascript?

Gracias por tu ayuda

[ceaped]

Hola holaaa
Alguien que me ayude con este tema por favor. ¿Si es posible hacerlo?

Gracias por su ayuda

[germangutierrez]

podes usar el start with selector

Código Javascript:

$("div[id^=stay-target-]")
 

Iniciado por ceaped

Buenos días
Tengo este código:

Código Javascript:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){       
$("#stay-target-1,#stay-target-2,#stay-target-3").ezpz_tooltip({
contentPosition: 'belowStatic',
stayOnContent: true,
offset: 0
});
 
});
</script>
 

Pero cada vez que agrego un ID debo agregar "#stay-target-1, #stay-target-2...etc"
Hay alguna forma de sólo agregar un "#stay-target-1" y no tener que repetirlo?

Gracias por su ayuda

[ceaped]

Hola germangutierrez
Mira así lo hice:

Código Javascript:

$(document).ready(function(){
$("div[id^=stay-target-]").ezpz_tooltip({
contentPosition: 'belowStatic',
stayOnContent: true,
offset: 0
});
});
 

Botón que carga el tooltip

Código HTML:

<div class="stay-tooltip-target tooltip-target" id="stay-target-">Botón 1</div>
<div class="stay-tooltip-target tooltip-target" id="stay-target-">Botón 2</div>
<div class="stay-tooltip-target tooltip-target" id="stay-target-">Botón 3</div>
 

Contennedor de cada tooltip:

Código HTML:

<div class="stay-tooltip-content tooltip-content marco_tooltip" id="stay-content-">Texto 1</div>
<div class="stay-tooltip-content tooltip-content marco_tooltip" id="stay-content-">Texto 2</div>
<div class="stay-tooltip-content tooltip-content marco_tooltip" id="stay-content-">Texto 3</div>
 

Pero sólo me queda cargando el primero.

Gracias por tu ayuda

[germangutierrez]

1) Modificastes los ids
2) los pusistes el mismo id , esto siempre genera quilombo, como todos se llaman igual depende del browser te va a tomar solo el primero o solo el ultimo
3) prueba con

Código HTML:

<div class="stay-tooltip-target tooltip-target" id="stay-target-1">Botón 1</div>
<div class="stay-tooltip-target tooltip-target" id="stay-target-2">Botón 2</div>
<div class="stay-tooltip-target tooltip-target" id="stay-target-3">Botón 3</div>
 

Código HTML:

<div class="stay-tooltip-content tooltip-content marco_tooltip" id="stay-content-1">Texto 1</div>
<div class="stay-tooltip-content tooltip-content marco_tooltip" id="stay-content-2">Texto 2</div>
<div class="stay-tooltip-content tooltip-content marco_tooltip" id="stay-content-3">Texto 3</div>
 

Iniciado por ceaped

Hola germangutierrez
Mira así lo hice:

Código Javascript:

$(document).ready(function(){
$("div[id^=stay-target-]").ezpz_tooltip({
contentPosition: 'belowStatic',
stayOnContent: true,
offset: 0
});
});
 

Botón que carga el tooltip

Código HTML:

<div class="stay-tooltip-target tooltip-target" id="stay-target-">Botón 1</div>
<div class="stay-tooltip-target tooltip-target" id="stay-target-">Botón 2</div>
<div class="stay-tooltip-target tooltip-target" id="stay-target-">Botón 3</div>
 

Contennedor de cada tooltip:

Código HTML:

<div class="stay-tooltip-content tooltip-content marco_tooltip" id="stay-content-">Texto 1</div>
<div class="stay-tooltip-content tooltip-content marco_tooltip" id="stay-content-">Texto 2</div>
<div class="stay-tooltip-content tooltip-content marco_tooltip" id="stay-content-">Texto 3</div>
 

Pero sólo me queda cargando el primero.

Gracias por tu ayuda

[ceaped]

Hola germangutierrez
Si te entiendo, pero a eso me refería si los podía tomar como un array [], todos con el mismo ID pero que el botón 1 corresponda al marco_tooltip, claro si es posible (no tener que poner para cada uno un ID distinto).

Gracias por tu ayuda

[Nemutagk]

Iniciado por ceaped

Hola MaNuX0218
No puedo pues mira como tengo el botón:

Ya tienes un "class" y puedes usarlo, no tienes que agregar nada...

Código Javascript:

$(document).ready(function(){
    $(".stay-tooltip-target").ezpz_tooltip({
        contentPosition: 'belowStatic',
        stayOnContent: true,
        offset: 0
    });
});