I would like to know if it is possible to use variables in jQuery and, if so, in what way. I explain what I'm trying to do.
Right now I have the following code in 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>
And this code in 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"});
})
});
Right now, I just control that when I mouse over the Schedule element, non-prog li elements fade out. Do I have to repeat the code for the elements that go with systems, dweb and software? Isn't there a way to do the same function for everything and depending on what you choose, one or the other will fade?
Thank you very much.
Here is a possible answer.
To obtain the solution we will identify with a 'data-target' attribute the name of the class that we want to highlight.
You can answer your question functionally in the following example
If you want to make use of variables, it is possible