jquery - jquery ui改变多个div的背景

Question

我正在尝试根据翻转的内容更改单独 div 的背景

javascript:

            $( "#topBar" ).hover(function() {
                    $(this).animate({backgroundColor: '#c7ce95' }, 600);
                }
            );

            $( "#topBar" ).mouseout(function() {
                 $(this).css('background', 'rgba(0, 0, 0, 0.7)');
            });

html

<div style="position:absolute; top:0; left:0; width:213px; height:20px;  display:block; float:left; color:#fff; padding:10px; background: rgba(0, 0, 0, 0.7); "  id="topBar" >test </div>
<div style="position:absolute; top:0; left:0; width:213px; height:20px;  display:block; float:left; color:#fff; padding:10px; background: rgba(0, 0, 0, 0.7); "  id="topBar" >test </div>

我有两个问题：

1. 推出不起作用。
2. 我只能让它在 1 上工作，因为它使用相同的 ID。而且我认为最好的办法不是复制 jquery 更改 ID，因为在页。

http://jsfiddle.net/zwbKC/

Answer 1

如果您想对多个元素执行相同的操作，您class应该给它们相同的值。id要么这样，要么将所有元素包装在 id 为 topBar 的容器中，并对 topBar 的子元素执行 jQuery 操作。