Utilizar variables en jQuery

lk2_89 · #1 (**permalink**) 06/08/2018, 12:49

Buenas tardes.

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:

Código HTML:

Ver original<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>
</html>

Y este código en jQuery:

Código Javascript:

Ver original$(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.

Alexis88 · #2 (**permalink**) 07/08/2018, 00:33

Los métodos selectores de jQuery tienen la particularidad de poder trabajar con selectores CSS e incluso con su sintaxis de selección, por lo que puedes colocar a varios selectores en la misma selección. Solo hará falta que los separes con comas.

xfxstudios · #3 (**permalink**) 07/08/2018, 07:42

Simplemente duplica la funcion de esta manera:

Código Javascript:

Ver original$('div#areas #programacion').mouseover(function(){
            $('#contenidos li').not('.prog').css({"opacity":"0.2"});
    })
    .mouseout (function(){
            $('#contenidos li').css({"opacity":"1"});
    })
    $('div#areas #sistemas').mouseover(function(){
            $('#contenidos li').not('.sist').css({"opacity":"0.2"});
    })
    .mouseout (function(){
            $('#contenidos li').css({"opacity":"1"});
    })
    $('div#areas #dweb').mouseover(function(){
            $('#contenidos li').not('.web').css({"opacity":"0.2"});
    })
    .mouseout (function(){
            $('#contenidos li').css({"opacity":"1"});
    })
    $('div#areas #software').mouseover(function(){
            $('#contenidos li').not('.soft').css({"opacity":"0.2"});
    })
    .mouseout (function(){
            $('#contenidos li').css({"opacity":"1"});
    })

Ver Muestra