1

結果を出力する必要があるページがあります。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>


<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の生成に関しては機能しますが、私の意見では、クライアントで作業するのは非常に苦痛になります.

私は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 を追加しています... JSONデータを追加してホバーdivを作成したいと思うとき。以下は、動作するサンプル コードを書き直したものです (まあ、十分に理解できるでしょう!):

<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 に答える