Question

I have the following code where I want to show / hide different text based upon a mouseover. I am using a data-global-id value and want to iterate through the children of the item-list and hide all but specified value (item-1 for data-global-id=1 for example):

<script>
  $(document).ready(function() {
    $('.item-list').hide();
    $('.h').mouseover(function() {
      // need to hide everything but the 1 or 2
      var id = $(this).data('global-id');
      var chil=$('.item-list').children();
      $.each(chil, function(i,v){
        alert(i);
        console.log(v);
      });
    });
  });
</script>

<style>
.h{
  width: 200px;
  border: 1px solid red;
}
</style>

<ul>
    <li><div class='h' data-global-id="1">Client 1</div></li>
    <li><div class='h' data-global-id="2">Client 2</div></li>
</ul>

<ul class="item-list">
    <li class="item-1">
        Lorem ipsum jtjtjt, etc...
    </li>
    <li class="item-2">
        Lorem ipsum, etc...
    </li>                      
</ul>

How would I specify in the each loop to hide everything and just show the item+data-global-id value? Is there a better / easier way to do this?

thx

Answer 1

I’m not entirely sure if this is what you want, but I’ll give it a shot anyway,

Since you’re already using jQuery for your project, you can do a direct search based on the data-global-id value as below

//Provide the same global-id key to each .item-list member
//Then do the following in your mouse over func
 var id = $(this).data('global-id');
 var chil=$('.item-list').children().show().
             not('[data-global-id="'+ id +'"]').hide();

Edit – Fiddle Added

Check out the fiddle here