Tema: Utilizar variables en jQuery
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/08/2018, 12:49
lk2_89
 
Fecha de Ingreso: agosto-2007
Mensajes: 71
Antigüedad: 17 años, 3 meses
Puntos: 1
Utilizar variables en jQuery
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
  1. <html>
  2.     <head>
  3.         <title>Prueba</title>
  4.         <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  5.         <script src="funciones.js"></script>
  6.     </head>
  7.     <body>
  8.         <div id="areas">    
  9.             <ul>
  10.                 <li id="programacion">Programacion</li>
  11.                 <li id="sistemas">Sistemas</li>
  12.                 <li id="dweb">Diseño web</li>
  13.                 <li id="software">Software</li>
  14.             </ul>
  15.         </div>
  16.         <div id="contenidos">
  17.             <ul>
  18.                 <li class="prog">jQuery</li>
  19.                 <li class="sist">Linux</li>
  20.                 <li class="web">CPanel</li>
  21.                 <li class="prog">PHP</li>
  22.                 <li class="soft">Photoshop</li>
  23.                 <li class="prog">Bash</li>
  24.                 <li class="web">WordPress</li>
  25.                 <li class="sist">iOS</li>
  26.                 <li class="prog">Java SE 8</li>
  27.             </ul>
  28.         </div>
  29.     </body>
  30. </html>

Y este código en jQuery:

Código Javascript: 
Ver original
  1. $(document).ready(function(){
  2.     $('div#areas #programacion').mouseover(function(){
  3.             $('#contenidos li').not('.prog').css({"opacity":"0.2"});
  4.     })
  5.     .mouseout (function(){
  6.             $('#contenidos li').not('.prog').css({"opacity":"1"});
  7.     })
  8. });

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.