Jquery和coldfusion

我有一个需要输出结果的页面，我使用jquery和json返回并显示结果，但结果没有显示在相关的div中，当用户将鼠标悬停在相关图像上时，相关div将显示结果。以下是脚本：

<style>
#normaldiv {}
.normaldiv {width:200px; height:200px; float:left; margin-left:15px; margin-bottom:15px; background-color:#CCC; position:relative;}
.hoverdiv {width:250px; height:350px; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; top:-10px; z-index:10000; position:absolute; background-color:#FFF;/**/ margin-left:-25px;}
</style>

#normaldiv{}
.normaldiv{宽度：200px；高度：200px；浮点：左；边距左：15px；边距底：15px；背景色：#CCC；位置：相对；}
.hoverdiv{width:250px；height:350px；-moz盒影：010px#000；-webkit盒影：010px#000；盒影：010px#000；top:-10px；z索引：10000；位置：绝对；背景色：#FFF；/**/左边距：-25px；}

$（文档）.ready（函数（）{
var mydata=eval（{“列”）：[“歌曲ID”、“歌曲标题”、“歌曲描述”、“歌曲活动”、“歌曲日期”、“链接”]，“数据”：[21，“这首曲目-原创混音（3:00）”，“艺术家：我标签：我自己的流派：国家（冰镇）发行日期：2012-05-28”，1，“2012年5月28日00:00”，“http:\/\/www.byme.com\/track\/this track original\/4356789”，16121]}）
var output=document.getElementById（'normaldiv'）；
var colMap=新对象（）；
//首先-找到我的专栏
对于（var i=0；i”+“
”；
var title=mydata.DATA[i][colMap[“SONG_title”]；
var reldate=mydata.DATA[i][colMap[“SONG_DATE”]；
var buynow=mydata.DATA[i][colMap[“LINK”]；
var reldesc=mydata.DATA[i][colMap[“SONG_DESC”]；
var relcov=mydata.DATA[i][colMap[“PHOTO_ID”]；
output.innerHTML++=”+”；
var content=document.createTextNode（标题）；
}   
$（“.normaldiv”）。悬停(
函数（）{
添加（$（''）；
}, 
函数（）{
$（this.find（“div:last”）.remove（）；
}
);
});

有人能告诉我脚本是否正确吗？ 我添加了一个模拟的json数据结果

我正在将图像加载到normaldiv中，但我希望当人们将鼠标悬停在图像上时，内容显示在悬停div中

---

感谢

看起来您正在将ColdFusion查询的结果直接序列化为JSON。虽然这在生成JSON方面是有效的，但在我看来，在客户端上使用它是一件非常痛苦的事情，因为您最终会遇到糟糕的列和数据属性，这是一件非常痛苦的事情

我会从CF中创建一个更好的JSON对象……当它到达客户端时，它看起来是这样的：

[
    {
        "song_id": 1234,
        "song_title": "My awesome song",
        "song_desc": "A description",
        "song_active": true,
        "song_date": "July 20, 2012 or whatever format you wish",
        "link": "http://stackoverflow.com"
    },
    {
        "song_id": 1235,
        "song_title": "My Other awesome song",
        "song_desc": "Another description",
        "song_active": false,
        "song_date": "July 18, 2012 or whatever format you wish",
        "link": "http://stackoverflow.com/again"
    },
]

此格式将允许您更轻松地循环返回的JSON数据，并在从CFML返回数据的客户端代码中执行以下操作（其中mydata是返回的JSON的名称）：

for（var i=0；i“+mydata[i].宋_desc+”
“+”
”；
output.innerHTML+=str；
}   

再次，这只是我在客户机中使用CF生成JSON的偏好，我想我会把它扔掉，让您考虑。

除此之外，您似乎在HTML元素（普通和悬停div）方面有一些错误。例如，normaldiv不是一个ID，它是一个类，因此getElementByID无法工作。此外，当您悬停时，您正在添加一个空的div class=hoverdiv…当我认为您希望通过附加JSON数据BB来创建hover div时。以下是对示例代码的重写，可以工作（很好，可能足以让您开始了！）：

测验
.normaldiv{宽度：200px；高度：200px；浮点：左；边距左：15px；边距底：15px；背景色：#CCC；位置：相对；}
.hoverdiv{width:250px；height:350px；-moz盒影：010px#000；-webkit盒影：010px#000；盒影：010px#000；top:-10px；z索引：10000；位置：绝对；背景色：#FFF；/**/左边距：-25px；}
$（文档）.ready（函数（）{
var mydata=[
{
“song_id”：1234，
“歌名”：“我最棒的歌”，
“song_desc”：“描述”，
“song_active”：没错，
“song_date”：“2012年7月20日或任何您希望的格式”，
“链接”：http://stackoverflow.com"
},
{
“song_id”：1235，
“歌曲标题”：“我的另一首很棒的歌曲”，
“song_desc”：“另一种描述”，
“song_active”：错误，
“song_date”：“2012年7月18日或任何您想要的格式”，
“链接”：http://stackoverflow.com/again"
},
]
变量输出=$（“”）；
对于（var i=0；i“+mydata[i].宋_desc+”
“+”
”；
var title=mydata[i]。歌曲标题；
var reldate=mydata[i]。宋_日期；
输出追加（str）；
警报（str）；
} 
$（“.normaldiv”）。悬停(
函数（）{
$（此）.append（输出）；
}, 
函数（）{
$（this.find（“div:last”）.remove（）；
}
);
});

---

希望有帮助！

看起来您正在将ColdFusion查询的结果直接序列化为JSON

[
    {
        "song_id": 1234,
        "song_title": "My awesome song",
        "song_desc": "A description",
        "song_active": true,
        "song_date": "July 20, 2012 or whatever format you wish",
        "link": "http://stackoverflow.com"
    },
    {
        "song_id": 1235,
        "song_title": "My Other awesome song",
        "song_desc": "Another description",
        "song_active": false,
        "song_date": "July 18, 2012 or whatever format you wish",
        "link": "http://stackoverflow.com/again"
    },
]

for(var i = 0; i < mydata.length; i++) {
    var str = " Title: " + mydata[i].song_title + "- Release Date: " + mydata[i].song_date +  "Link: " + mydata[i].link + "<br />" + mydata[i].song_desc + "<br />"+ "<br />";
    output.innerHTML += str;
}   

<html>
<head>
<title>TEST</title>
<style type="text/css">
    .normaldiv {width:200px; height:200px; float:left; margin-left:15px; margin-bottom:15px; background-color:#CCC; position:relative;}
    .hoverdiv {width:250px; height:350px; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; top:-10px; z-index:10000; position:absolute; background-color:#FFF;/**/ margin-left:-25px;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var mydata  = [
            {
                "song_id": 1234,
                "song_title": "My awesome song",
                "song_desc": "A description",
                "song_active": true,
                "song_date": "July 20, 2012 or whatever format you wish",
                "link": "http://stackoverflow.com"
            },
            {
                "song_id": 1235,
                "song_title": "My Other awesome song",
                "song_desc": "Another description",
                "song_active": false,
                "song_date": "July 18, 2012 or whatever format you wish",
                "link": "http://stackoverflow.com/again"
            },
        ]
        var output = $("<div class='hoverdiv'><\/div>");

        for(var i = 0; i < mydata.length; i++) {
            var str = " Title: " + mydata[i].song_title + "- Release Date: " + mydata[i].song_date +  "Link: " + mydata[i].link + "<br />" + mydata[i].song_desc + "<br />"+ "<br />";
            var title = mydata[i].song_title;
            var reldate = mydata[i].song_date;
            output.append(str);
            alert(str);
        } 

        $(".normaldiv").hover(
            function () {
                $(this).append(output);
            }, 
            function () {
                $(this).find("div:last").remove();
            }
        );
    });
</script>
</head>
<body>
    <div class="normaldiv"><img src="images/rel/161.jpg" width="200" height="200"></div>
</body>
</html>