不确定jQuery.prve()不起作用的原因
Unsure why jQuery .prev() is not working
当我将鼠标悬停在一个链接上时,我要做的是使其右边框和上一个链接的边框变色。
<div id="navbar">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Gigs</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Social</a></li>
</ul>
</div>
这是JavaScript:
$("li a").hover(function() {
$(this).animate({
color: '#0099FF',
borderRightColor: '#0099FF'
}, 500);
$(this).prev().animate({borerRightColor: '#0099FF'}, 500);
}, function() {
$(this).animate({
color: '#FFFFFF',
borderRightColor: '#FFFFFF'
}, 500);
$(this).prev().animate({borerRightColor: '#FFFFFF'}, 500);
});
如有任何帮助或建议,我们将不胜感激,谢谢!
li a
选择每个<a>
元素。.prev()
选择上一个同级元素,而不是"集合中的上一个元素",并且<a>
没有上一个元件,因为它们没有同级元素,只有父元素。试试这个:
$(this).closest('li').prev().children().animate(...);
此外,您使用了borerRightColor
而不是borderRightColor
。
来自.prev()
:的文档
描述:获取匹配元素集中每个元素的前一个同级元素,可选地由选择器进行筛选。
这些链接不是同级链接。
$("li").hover(function() {
$(this).children().animate({
color: '#0099FF',
borderRightColor: '#0099FF'
}, 500);
$(this).prev().children().animate({borerRightColor: '#0099FF'}, 500);
}, function () {
$(this).children().animate({
color: '#FFFFFF',
borderRightColor: '#FFFFFF'
}, 500);
$(this).prev().children().animate({borerRightColor: '#FFFFFF'}, 500);
});
这是jsFiddle上的一个演示。我把鼠标悬停在<li>
上,这样你就不会到处乱跑了。
this
上下文指的是悬停的<a>
元素,而不是<li>
。<a>
元素没有以前的同级元素。
使用parent
方法访问<li>
:
$(this).parent()......
相关文章:
- ng-view 中的脚本在从文件引用时不起作用(JQuery 在角度之前加载)
- 转换效果不起作用jquery
- 淡入淡出和AppendTo不起作用-jQuery
- 变量计算不起作用(jquery/javascript)
- 更改事件不起作用 jQuery 自动完成
- 倒计时不起作用 jquery
- ajax 响应包括 image,onClick 事件对图像不起作用 jQuery
- 从JavaScript添加html,但不起作用jQuery切换功能
- 简单的工具提示插件 - 点击选项不起作用 - jQuery
- 图像滑块不起作用(jquery)- Rails 3项目
- 触发单击事件不起作用 jquery
- 动态创建的 li 点击事件不起作用 jQuery
- Jquery验证不起作用.Jquery-Javascript
- JavaScript生成的元素不起作用-jQuery
- 事件委派不起作用jquery
- 类选择器在追加后不起作用 (JQuery)
- 为什么这个变量不起作用?Jquery
- 首先,渐变有时似乎不起作用(jquery)
- 有什么原因吗('img')加载不起作用(jQuery)
- 更改不起作用jQuery