1

This code does not add class when you hover a list item.

What I may be doing wrong so that the request does not work? 

var thumbLength = $('.thumb').length;                   
for (var i = 0; i < thumbLength; i++) { 

    $('#thumb-' + i).hover(
        function () {
            $('#img-' + i).addClass('hover');
        }, 
            $('#img-' + i).removeClass('hover');
        }
    );
}

html

<ul>
    <li class="thumb" id='thumb-0'>Milk</li>
    <li class="thumb" id='thumb-1'>Bread</li>
    <li class="thumb" id='thumb-2'>Chips</li>
    <li class="thumb" id='thumb-3'>Socks</li>
  </ul>
<div class='img' id='img-0'>Milk</div>
<div class='img' id='img-1'>Bread</div>
<div class='img' id='img-2'>Chips</div>
<div class='img' id='img-3'>Socks</div>

css

.hover{
    color:green;
    font-size: 20px;
}

Thanks.

Flow
  • 51
  • 1
  • 9
  • Because `i` will equal `thumbLength` – Taplar Jun 13 '18 at 17:36
  • 1
    Just to put it out there, you don't need JavaScript for this at all. Instead, in your CSS: `.thumb:hover { color: green; font-size: 20px; }` (Separately: Changing the font size when someone hovers is usually not a great UX...) – T.J. Crowder Jun 13 '18 at 17:37

1 Answers1

1

Do not use symbol # in id-attribute.

If you need use selector part of attribute like this:

$('[id^="_first_part_of_id_"]').(...);


$('[id^="thumb-"]').hover(function(){
  var last_part_id=(($(this).attr('id')).split('-'))[1];
  $('#img-'+last_part_id).addClass('hover');
},function(){
     $('[id^="img-"]').removeClass('hover');
});
.hover{
    color:green;
    font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul>
    <li class="thumb" id='thumb-0'>Milk</li>
    <li class="thumb" id='thumb-1'>Bread</li>
    <li class="thumb" id='thumb-2'>Chips</li>
    <li class="thumb" id='thumb-3'>Socks</li>
  </ul>
<div class='img' id='img-0'>Milk</div>
<div class='img' id='img-1'>Bread</div>
<div class='img' id='img-2'>Chips</div>
<div class='img' id='img-3'>Socks</div>
mscdeveloper
  • 2,749
  • 1
  • 10
  • 17
  • Thank you, mscdeveloper! I'm not very familiar with Jquery. Thank you for the attention paid to explaining the solution so quickly. – Flow Jun 13 '18 at 17:55