Can variables be used in jQuery?

Navigation
3

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.

I have the following HTML code right now: 

<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 only control that when I put the mouse on the Programming element, the li elements that are not prog vanish. Do I have to repeat the code for the elements that go with systems, dweb and software? Is there no way to do the same function for everything and depending on what you choose, vanish one or the other?

Thank you very much.

    
asked by lk2_89 06.08.2018 в 21:05
source

2 answers

3

Here is a possible answer.

To obtain the solution we will identify with a 'data-target' attribute the name of the class we want to highlight.

You can answer your question functionally in the following example 

$(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>
    
answered by 06.08.2018 / 21:16
source
1

If you want to use variables, it is possible 

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>
    
answered by 06.08.2018 в 21:36
Help with query sql server 2008 pls how to use a href on a label other than (a)