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.