求解一个smarty，js和css的问题

Question

我从数据库取出最新的10条记录，然后通过samrty显示在页面上，每条记录都是一个div，然后用js控制当 鼠标悬停在div上时该div的背景颜色改变，现在的显示结果 只有第一个div是ok的 ，当鼠标悬停在其他div上时，却是第一个div的背景色改变了，其他的没变，请问这种情况该怎么解决？
 jsfunction mouseOver(){
document.getElementById('diary').style.backgroundColor ="#C4C8CC";
}
function mouseOut(){
document.getElementById('diary').style.backgroundColor ="#F4F5F7";
}页面上就是一个smarty二维数组的显示

Answer 1

把html代码发上来啊。从你的描述来看，不会是所有的div都设置了相同的id属性值吧？

Answer 2

<{foreach from=$arr5 item=item1}>
<div id="diary" style="background-color:#F4F5F7;"  onmouseover="mouseOver()" onmouseout="mouseOut()">
<span class="diary_titleleft"><a href="#"><{$item1.title}></a></span>
<span class="diary_titleright">[&nbsp;<a href="#"><b><{$item1.com_count}></b></a>&nbsp;]个评论</span>
<div class="diary_content"><{$item1.content|truncate:200}></div>
<span class="diary_bottomleft"><{$item1.datetime}>&nbsp;|&nbsp;<a href="#"><{$item1.type}></a></span>
<span class="diary_bottomright"><a href="#">
<img src="../images/read.png"/></a></span></div>
<{/foreach}>获得的数据是个二维数组 用了smarty的foreach，这样写有问题么？

Answer 3

getElementById只能取第一个id
<ul>
<li onmouseover='this.style.backgroundColor ="#C4C8CC";' onmouseout='this.style.backgroundColor ="#F4F5F7";'><li>
<li onmouseover='this.style.backgroundColor ="#C4C8CC";' onmouseout='this.style.backgroundColor ="#F4F5F7";'><li>
</ul>

Answer 4

一个页面中的id值必须唯一啊。。建议将diary作为class值，html代码及JS函数改成下面这样：
<div class="diary" onmouseover="mouseOver(this);" onmouseout="mouseOut(this);">DEMO</div>function mouseOver(obj) {
obj.style.backgroundColor = '#C4C8CC';
}
function mouseOut(obj) {
obj.style.backgroundColor = '#F4F5F7';
}

Answer 5

id不能重名。这是常识。重名了后面的会失效。
onmouseover="mouseOver(this)" onmouseout="mouseOut(this)"js代码：
function mouseOver(obj){
   obj.style.backgroundColor ="#C4C8CC";
}
function mouseOut(obj){
    obj.style.backgroundColor ="#F4F5F7";
}

Answer 6

本帖最后由 xuzuning 于 2012-05-08 09:48:54 编辑