1

我有一个需要输出结果的页面，我正在使用带有 json 的 jquery 来返回和显示结果，但是结果没有显示在相关的 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>


<script type="text/javascript">
                $(document).ready(function(){


                var mydata  = eval({"COLUMNS":["SONG_ID","SONG_TITLE","SONG_DESC","SONG_ACTIVE","SONG_DATE","LINK"],"DATA":[21, "This Track - Original Mix (3:00)", "<p><strong>Artist: <\/strong>Me<br \/> <strong>Label:&nbsp;<\/strong>My Own <br \/> <strong>Genre: <\/strong>Country (<span class=\"trackTags\">Chilled<\/span>)<strong><\/strong><br \/> <strong>Release Date: <\/strong>2012-05-28<\/p>", 1, "May, 28 2012 00:00:00", "http:\/\/www.byme.com\/track\/this-track-original\/4356789", 161, 21]]})
                var output = document.getElementById('normaldiv');
            var colMap = new Object();

       //first - find my columnsco
        for(var i = 0; i < mydata.COLUMNS.length; i++) {
        colMap[mydata.COLUMNS[i]] = i;        
        }

        for(var i = 0; i < mydata.DATA.length; i++) {
        var str = " Title: " + mydata.DATA[i][colMap["SONG_TITLE"]] + "- Release Date: " + mydata.DATA[i][colMap["SONG_DATE"]] +  "Link: " + mydata.DATA[i][colMap["LINK"]] + "<br />" + mydata.DATA[i][colMap["SONG_DESC"]] + "<br />"+ "<br />";
            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 += "<div class=normaldiv>" + "<img src=images/rel/"+  mydata.DATA[i][colMap["PHOTO_ID"]]+".jpg width=200 height=200/>" +"</div>";
            var content = document.createTextNode(title);

        }   


            $(".normaldiv").hover(
        function () {
        $(this).append($('<div class=hoverdiv></div>'));
           }, 
        function () {
        $(this).find("div:last").remove();
                  }
                );
                });


</script>

<div id="normaldiv"></div>

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

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

谢谢

4

1 回答 1

5

看起来您正在将 ColdFusion 查询的结果直接序列化为 JSON。虽然这在生成 JSON 方面是有效的，但在我看来，在客户端上使用它会带来巨大的痛苦，因为你最终会得到糟糕的 COLUMN 和 DATA 属性，这让你很难使用。

我会从 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.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;
}

再说一次，这只是我对在客户端使用 CF 生成的 JSON 的偏好，我想我会把它扔在那里供你考虑。

除此之外，您似乎对 HTML 元素（普通和悬停 div）有一些失误。例如， normaldiv 不是一个 ID，它是一个类，所以 getElementByID 不起作用。此外，当您悬停时，您正在添加一个空的 div class=hoverdiv ...当我认为您想要创建悬停 div 并附加 JSON 数据时。以下是对有效示例代码的重写（好吧，可能足以让您继续前进！）：

<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>

希望能帮助到你！

于 2012-07-20T17:38:34.413 回答