3

Me gustaría saber si es posible utilizar variables en jQuery y, en caso afirmativo, de que manera. Les explico lo que intento hacer.

Yo tengo ahora mismo el siguiente código en HTML:

<html>
<head>
    <title>Prueba</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="funciones.js"></script>
</head>
<body>
    <div id="areas">    
        <ul>
            <li id="programacion">Programacion</li>
            <li id="sistemas">Sistemas</li>
            <li id="dweb">Diseño web</li>
            <li id="software">Software</li>
        </ul>
    </div>
    <div id="contenidos">
        <ul>
            <li class="prog">jQuery</li>
            <li class="sist">Linux</li>
            <li class="web">CPanel</li>
            <li class="prog">PHP</li>
            <li class="soft">Photoshop</li>
            <li class="prog">Bash</li>
            <li class="web">WordPress</li>
            <li class="sist">iOS</li>
            <li class="prog">Java SE 8</li>
        </ul>
    </div>
</body>

Y este código en jQuery:

$(document).ready(function(){
$('div#areas #programacion').mouseover(function(){
        $('#contenidos li').not('.prog').css({"opacity":"0.2"});
})
.mouseout (function(){
        $('#contenidos li').not('.prog').css({"opacity":"1"});
})

});

Ahora mismo, solo controlo que cuando ponga el ratón sobre el elemento Programación, los elementos li que no sean prog se desvanezcan. ¿Tengo que repetir el código para los elementos que vayan con sistemas, dweb y software? ¿No hay manera de hacer la misma función para todo y dependiendo de lo que elijas, se desvanezcan unos u otros?

Muchas gracias.

1
  • Hay una posible respuesta a tu pregunta en SO Commented el 6 ago. 2018 a las 19:14

2 respuestas 2

3

Aquí tienes una posible respuesta.

Para obtener la solución identificaremos con un atributo 'data-target' el nombre de la clase que queremos resaltar.

Puedes la respuesta a tu pregunta de forma funcional en el siguiente ejemplo

$(document).ready(function(){
  $('div#areas li[data-target]')
  .mouseover(function(){
        // Dentro del manejador del evento this es el elemento que disparo la función.
        // En tu caso, this es cualquiera de los elementos li
        // Puedes acceder a su atributo data-target para crear el selector de forma dinámica
        var selector = '.' + $(this).attr('data-target');
        $('#contenidos li').not(selector).css({"opacity":"0.2"});
  })
  .mouseout (function(){
        var selector = '.' + $(this).attr('data-target');
        $('#contenidos li').not(selector).css({"opacity":"1"});
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <title>Prueba</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="funciones.js"></script>
</head>
<body>
    <div id="areas">    
        <ul>
            <li id="programacion" data-target="prog">Programacion</li>
            <li id="sistemas" data-target="sist">Sistemas</li>
            <li id="dweb" data-target="web">Diseño web</li>
            <li id="software" data-target="soft">Software</li>
        </ul>
    </div>
    <div id="contenidos">
        <ul>
            <li class="prog">jQuery</li>
            <li class="sist">Linux</li>
            <li class="web">CPanel</li>
            <li class="prog">PHP</li>
            <li class="soft">Photoshop</li>
            <li class="prog">Bash</li>
            <li class="web">WordPress</li>
            <li class="sist">iOS</li>
            <li class="prog">Java SE 8</li>
        </ul>
    </div>
</body>

2
  • Muchísimas gracias, @dperezv Llevaba desde el viernes dándole vueltas al asunto y no conocía el data-target.
    – lk2_89
    Commented el 6 ago. 2018 a las 19:28
  • data-target no es una propiedad en si de HTML. Por convención, se emplea el prefijo data- para atributos personalizados. Podría ser data-clase, data-nombre, data-perro Lo importante es saber recuperar el valor para trabajar con él. Desde jquery tán simple como utilizar el método data() o attr() Puedes conocer más acerca de ellos en la documentación de jQuery Commented el 6 ago. 2018 a las 19:30
1

Si quieres hacer uso de variables, es posible

function EvnGeneric(containerElement, mainElement,elementSelectId,elementSelectCls, opacityOver,opacityOut){
     $('div#' + containerElement + ' #' + elementSelectId ).mouseover(function(){
            $( "#" + mainElement + '  li').not("."+elementSelectCls).css({"opacity": opacityOver});
    })
    .mouseout (function(){
            $(  "#" + mainElement + ' li').not("."+elementSelectCls).css({"opacity": opacityOut});
    });
}


$(document).ready(function(){
 //     EvnGeneric(Contenedor Principal, Wrap , Id del elemento a asociar evento, clase que administra , valor el opacity en mouseover, valor el opacity en mouseout);
  EvnGeneric("areas","contenidos","programacion","prog","0.2","1");
  EvnGeneric("areas","contenidos","sistemas","sist","0.2","1");
  EvnGeneric("areas","contenidos","dweb","web","0.2","1");
  EvnGeneric("areas","contenidos","software","soft","0.2","1");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="areas">    
        <ul>
            <li id="programacion">Programacion</li>
            <li id="sistemas">Sistemas</li>
            <li id="dweb">Diseño web</li>
            <li id="software">Software</li>
        </ul>
    </div>
    <div id="contenidos">
        <ul>
            <li class="prog">jQuery</li>
            <li class="sist">Linux</li>
            <li class="web">CPanel</li>
            <li class="prog">PHP</li>
            <li class="soft">Photoshop</li>
            <li class="prog">Bash</li>
            <li class="web">WordPress</li>
            <li class="sist">iOS</li>
            <li class="prog">Java SE 8</li>
        </ul>
    </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.