.addClass()不响应请求

Question

此代码在悬停列表项时不添加类。

我可能做错了什么，这样请求就不能工作了？

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;
}

谢谢。

Answer 1

不要在id-属性中使用符号#。

如果需要使用属性的选择器部分，如下所示：

$('[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>

​