“#button_1”不受。点击()或.hover()

可能是一个新手的错误,但我的#button_1 ID没有受到click()hover() jQuery效果。

如果有人能来看看我的jsfiddle,这将不胜感激。

这也可能是很明显的,但我想#button_1作为所有其他按钮。 :)

此外,我怀疑这是一个非常愚蠢的错误,这东西我已经忽视。

--------------解决方案-------------

不要重复这么多的代码,试试这个和它的工作

尝试通过行线,在某处代码,打破绑定事件的投掷的错误。 你有悬停左右一些错误,删除一切,有绑定的事件,他们的工作。

你知道这样对不对,在1号线断裂处documentready,下面的所有绑定可能不会被绑定。

$(document).ready( function () {

$('#button_1,#button_2').click(function() {
alert('Handler for .click() called.');

});

});

我可能会建议冷凝有点那个代码,更接近于:

$('a div[class^="button"]').click(
function(e){
e.stopPropagation(); // prevent the click bubbling to the parent 'a' element
$('.button_active')
.removeClass('button_active')
.addClass('button_normal');
$(this).addClass('button_active').removeClass('button_normal');
});

JS提琴演示。



编辑响应从OP质疑:

我想补充,[由OP更新了小提琴,包括上面的代码]实际上是设置“button_hover”作为类,而不是“button_active”,任何想法,为什么这样做呢?

是的; 这是响应CSS选择器的特殊性,我想补充,并根据需要在响应事件删除类(而不是反复检查是否button_hover设置)。 作为元素与最终class="button_normal button_hover"和CSS(我认为)放在稍后声明的类更强调秩序, button_hover保持不变。 这晚,我有点累,但这是排序(简言之)发生了什么。

下面的演示采用了一切(我认为),你需要的,加上修改后的CSS选择器,只要你想应该做的:

$('a div[class^="button"]').hover(
function(){
$(this).addClass('button_hover').click(
function(e){
e.preventDefault();
$('.button_active')
.addClass('button_normal')
.removeClass('button_active');
$(this).addClass('button_active').removeClass('button_hover');
});
},
function(){
$(this).removeClass('button_hover');
});

CSS:

.button_active,
.button_normal.button_active { background: #000; }
.button_normal.button_hover { background: #ff0; }
.button_normal { background: #d89; }

JS提琴演示。



参考文献:

  • 属性-开始-与( ^= )选择。
  • e.stopPropagation()
  • removeClass()
  • addClass()
分类:JavaScript的 时间:2013-08-26 人气:0
本文关键词: 的JavaScript,CSS和jQuery
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.890 (s). 10 q(s)