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-attribute中使用符号＃。

如果你需要使用属性的选择器部分：

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

＆＃13;

$('[id^="thumb-"]').hover(function(){
	 var last_part_id=(($(this).attr('id')).split('-'))[1];
	 $('#img-'+last_part_id).addClass('hover');
},function(){
     $('[id^="img-"]').removeClass('hover');
});

＆＃13;

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

＆＃13;

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

＆＃13;

jquery hover（）。addClass（）不响应请求

1 个答案: