2 quicksilvery quicksilvery 于 2016.02.24 11:53 提问

通过hover控制表格td内容的显示和隐藏

这儿我建立了5个父div,id分别是
box0 box1 box2 box3 box4

和5个子div , id分别是
personalInfo0 personalInfo1 personalInfo2 personalInfo3 personalInfo4

当我的鼠标移动到box0的时候,我想显示personalInfo0,但不想显示其他的personalInfo。
以此类推,当鼠标移动到boxn的时候,就显示personalInfon。
请问该如何实现...?

下面是我建立表格的关键语句。

for(var i=0;i<len;i++){
    var tempStr="";
 tempStr+="<tr><td>"+tempDaTa[i].id+"</td><td>"+tempDaTa[i].content+"</td><td><div id='box"+i+"'>"+tempDaTa[i].nickname+"<br/>"
                    +"<div id='personalInfo"+i+"' style='display:none'>"+tempDaTa[i].camper+"-"+tempDaTa[i].major+"-"+tempDaTa[i].grade+"</div></div></td></tr>";
        $tbody.append(tempStr); 
        }

2个回答

qq_19891827
qq_19891827   2016.02.24 12:06
已采纳

jquery代码:

$("div[id^='box']").each(function(index,domEle){
    var _index=index;
    $(this).mouseenter(function(){
        $('#personalInfo'+_index).show();
    });
    $(this).mouseleave(function(){
        $('#personalInfo'+_index).hide();
    })
})
qq_19891827
qq_19891827 回复quicksilvery: 不客气,相互学习
接近 2 年之前 回复
quicksilvery
quicksilvery 多谢前辈指点!你的答案解决了我的问题!
接近 2 年之前 回复
showbo
showbo   Ds   Rxr 2016.02.24 12:07

    for (var i = 0; i < len; i++) {
        var tempStr = "";
        tempStr += "<tr><td>" + tempDaTa[i].id + "</td><td>" + tempDaTa[i].content + "</td><td><div id='box" + i + "'>" + tempDaTa[i].nickname + "<br/>"
                           + "<div id='personalInfo" + i + "' style='display:none'>" + tempDaTa[i].camper + "-" + tempDaTa[i].major + "-" + tempDaTa[i].grade + "</div></div></td></tr>";
        $tbody.append(tempStr);
    }

    $('div[id^="box"]').mouseover(function () {
        $('div[id^="personalInfo"]').hide().filter('#personalInfo' + this.id.replace('box', '')).show();
    })
quicksilvery
quicksilvery 谢谢码农大哥,比较了一下,一楼的方法更接近我的想法~
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片