como modificar el siguiente script para ahorrar muchas lineas de codigo

[rufus]

tengo el siguiente script en jquery

Código Javascript:

<script>
    $(function(){
        
        var ventana = $(window); 
        var doc = $(document);
        var enlacesebusca_1 = $("#sebusca1");
 
  
        $("#enlacesebusca1").on("click", mostrarLogin);
  
        ventana.on("resize", ajustarPosicionesLogin);
        ventana.on("scroll", ajustarPosicionesLogin);
   
 
        function ajustarPosicionesLogin(e){
            enlacesebusca_1.css({
              top: (((ventana.height() - enlacesebusca_1.height()) / 2) + ventana.scrollTop()) + "px",
              left: ((ventana.width() - enlacesebusca_1.width()) / 2) + "px"
            });
            $("#capamodal").css({
              width: "100%",
              height: "100%"
            });
        }
 
        function mostrarLogin(e)
        {
            e.preventDefault();
            enlacesebusca_1.css({
              top: (((ventana.height() - enlacesebusca_1.height()) / 2) + ventana.scrollTop()) + "px",
              left: ((ventana.width() - enlacesebusca_1.width()) / 2) + "px",
              "z-index": 1000
            });
 
           
            enlacesebusca_1.fadeIn(2000);
           
 
           var capamodal = $("<div>").attr("id", "capamodal");
            capamodal.css({
                opacity: 0.80,
                "z-index": 900,
                width: doc.width(),
                height: doc.height(),
                backgroundColor: "#3fc",
                position: "fixed",
                top: "0px",
                left: "0px",
                display: "none",
                overflow: "hidden",
            })
            .appendTo("body")
            .fadeIn(2000)
            .on("click", function()
            {
              enlacesebusca_1.fadeOut(2000);
            
              capamodal.fadeOut(2000, function()
              {
               capamodal.remove();
              });
           
        });
 
   }
 
 });
   
    </script>
 

Código HTML:

<a href="#" id="enlacesebusca1"  class="letraenlace">Letra</a>
 

como lo puedo modificar para hacer lo mismo con otras 11 canciones más ahorrando y reutilizando codigo??
gracias

[Drako_18]

Buenas compañero,

Sin conocer muy bien lo que quieres hacer... Te diría que usaras las clases como selector, en vez del ID del elemento...
Además, la capa modal, en vez de crearla N veces, puedes dejarla en el HTML y con el fadein o fadeout es suficiente... Se mostrará o ocultará cuando pulses en alguno de los enlaces que "configures"...

Si en vez de usar:
var enlacesebusca_1 = $("#sebusca1");

Usas... Un each (https://api.jquery.com/each/):
$( ".letraenlace" ).each(function( index ) {
// Aquí todas las operaciones para ese enlace...
});


Un saludo!

[rufus]

buscando en google he encontrado esto y funciona, con el siguiente codigo meto en una variable el id del enlace que he pulsado

Código Javascript:

$(".letraenlace").click(function()
 {
            var oid=$(this).attr("id");
}
 

pero esta variable oid como la meto en el siguiente codigo para que me coga el "id" pulsado y me ejecute la funcion mostrarlogin???

$(oid).on("click", mostrarLogin); //asi no me funciona mi duda es el $(oid) se pone asi??

[Drako_18]

Buenas compañero,

Pues para lo que quieres, puedes usarlo así:
$(".letraenlace").on("click", mostrarLogin);

Cuando hagan click en cualquier elemento que tenga la clase "letraenlace", llamará la función mostrarLogin.


Un saludo!

[rufus]

drako me funciona lo de $(".letraenlace") pero no es lo que necesito... ya que tengo muchas canciones cada una con una letra.... necesito coger el id del link para llamar a un div diferente cada vez..

$(".letraenlace").click(function()
{
var oid=$(this).attr("id");
//console.log(oid);
$(oid).on("click", mostrarLogin);

//no me da error esta linea pero no funciona :: $(oid).on("click", mostrarLogin);
en $(oid) que tengo que poner? ya que en la funcion meto el valor del id en la variable oid!!!!

[Drako_18]

Buenas,

Si quieres haz de poner:
$("#" + oid).on....
Ten en cuenta, que el selector de ID es así: $("#MiId")

Pero eso, o poner lo que te dije antes, es exactamente lo mismo, pues estás usando el objeto que tiene la clase "letraenlace"...

Cuando haces el:
$(".letraenlace").click(function()
{
var oid=$(this).attr("id");
//console.log(oid);
$(oid).on("click", mostrarLogin);
}

Es lo mismo que hacer:
$(".letraenlace").on("click", mostrarLogin);

Pues cada "letraenlace" va a llamar su propio mostrarLogin...
Haciendo lo que dices, lo que haces es:

Click en EsteEnlace={
var oID= EsteEnlace.dimeSuID;
NuevoClick en EsteEnlace = mostrarLogin;
}

Básicamente, dentro de un CLICK le estás diciendo que al hacer click sobre el enlace, cambie su CLICK a la llamada de una variable... No tiene sentido compañero...


Ejemplo....

DOM:
<a class="letraenlace" id="uno">click</a>
<a class="letraenlace" id="dos">click</a>

Cargas el JS:
<a class="letraenlace" id="uno" OnClick='$(".letraenlace").click(function(){var oid=$(this).attr("id");$(oid).on("click", mostrarLogin);}'>click</a>

<a class="letraenlace" id="dos" OnClick='$(".letraenlace").click(function(){var oid=$(this).attr("id");$(oid).on("click", mostrarLogin);}'>click</a>


Haces CLICK en ID=uno:
<a class="letraenlace" id="uno" OnClick='mostrarLogin'>click</a>

<a class="letraenlace" id="dos" OnClick='$(".letraenlace").click(function(){var oid=$(this).attr("id");$(oid).on("click", mostrarLogin);}'>click</a>

Hasta que no haces otra vez click en el elemento ID=uno, no se ejecuta el mostrarLogin...
Esto, es lo que estás haciendo al ejecutar ese código.


Un saludo!

[rufus]

gracias drako con el ("#". + oid ya me funciona lo que quiero hacer pero hay errores raros .
1º ago doble click y no se ejecuta el efecto
2º ago otra vez doble click y se ejecuta pero como si se ejecutara 3 veces a la vez, con lo que el fondo de la web desaparece por la opacidad y cuando ago click en algun lado de la pantalla no desaparece la opacidad, sino que tengo que hacer varios click para dejar la web tal cual estaba antes de pulsar...

[rufus]

luego esta el tema de como ago para no tener que repetir las funciones
function ajustarPosicionesLogin(e) y function mostrarLogin(e)

[Drako_18]

Como decía nuestro amigo Jack... Vamos por partes...

¿Quieres hacer que haga doble click para hacer mostrarLogin?
Si es así, para eso está el evento https://api.jquery.com/dblclick/
Y no hacer un click anidado dentro de otro.

Segundo, si tienes la caja de login dentro del buscar, lo puedes hacer con CSS, pero eso, postealo en el foro adecuado...

Y la pregunta del millón... Quieres que al hacer click en cada enlace se ejecute el mostrarLogin no¿?

Postea el código entero igual que en la primera vez y le echo un vistazo..