Jquery和coldfusion

Question

Jquery和coldfusion

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

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

谢谢

Answer 1

cra*_*sky 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"
    },
]

Run Code Online (Sandbox Code Playgroud)

这种格式允许您更容易地循环返回返回的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;
}

Run Code Online (Sandbox Code Playgroud)

再一次,这只是我在客户端使用CF生成的JSON的偏好,并且我认为我会把它扔到那里让你考虑.

除此之外,似乎你对HTML元素(普通和悬停div)有几个失误.例如,normaldiv不是ID,它是一个类,因此getElementByID不起作用.此外,当你悬停时,你正在添加一个空的div class = hoverdiv ...当我想你想要用JSON数据创建悬停div时bby追加它.以下是重写的示例代码(很好,足以让你去!):

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

Run Code Online (Sandbox Code Playgroud)

希望能帮助到你!

归档时间：	13 年，3 月前
查看次数：	676 次
最近记录：	13 年，3 月前