logo标签列表

将纯JS转换为JQuery

javascriptjqueryjsondomlast.fm
4
我正在尝试从last.fm API附加一些JSON数据，我已经在几个阶段使用alert()来验证API是否被正确解析，结果是正确的。这让我得出结论getElementById().appendChild()不起作用，下面是我设置的测试页面的URL：http://mutant-tractor.com/tabtest.html。因此，从这里直接使用JS转移到JQuery被认为是最好的方法，也就是说，我对任何JQuery都没有头绪，我的JS知识基于我所做的一些基本Java...将其转换为有效的JQuery有多简单/复杂？我会为此付出赏金，但我不知道该怎么做。
function calculateDateAgo(secAgo) {
 var agoString, agoRange, agoScaled;
 if(secAgo >= (agoRange = 60*60*24)) 
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago";
 else if(secAgo >= (agoRange = 60*60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago";
 else if(secAgo >= (agoRange = 60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago";
 else if(secAgo >= -60)
   agoString = "blastin' out now";
 else
   agoString = "soon ;)";
 return agoString;
}

function truncateName(name, l) {
return name.length > l ? name.substr(0,l-2) + "\u2026" : name;
}

function lfmRecentTracks(JSONdata) {

try { 
 var eImg, eLink, eSpan, divTag, eWrapper;
 var oTracks = new Array().concat(JSONdata.recenttracks.track);
 for (var i = 0; i < oTracks.length; i++) {
  //insert coverart image
  var spanTag  = document.createElement("span");
  document.body.appendChild(spanTag);
  spanTag.className = "lfmTrackImageCell tab_item";
  if(oTracks[i].image[1]["#text"] != "") {
   eImg = document.createElement("img");
   spanTag.appendChild(eImg);
   eImg.src = oTracks[i].image[1]["#text"];
   eImg.className = "lfmTrackImage";
  }else{
    eImg = document.createElement("img");
    spanTag.appendChild(eImg);
    eImg.src = "http://cdn.last.fm/flatness/icons/res/3/track.png";
    eImg.className = "lfmTrackImageNotFound";
  }
 }
for (var i = 0; i <>[lessthanhere] oTracks.length; i++) {
  //insert track link
  spanTag = document.createElement("span");
  spanTag.className = "lfmTrackInfoCell tabslider";
  eLink = document.createElement("a");
  eLink.appendChild(document.createTextNode( truncateName(oTracks[i].name, 25) ));
  //alert(truncateName(oTracks[i].name, 25));
  spanTag.appendChild(eLink);
  eLink.href = oTracks[i].url;
  //alert(oTracks[i].url);
  eLink.target = "new";
  eLink.className = "lfmTrackTitle";
  document.body.appendChild(spanTag);

  //insert artist name
  eSpan = document.createElement("span");
  eSpan.appendChild(document.createTextNode(truncateName(oTracks[i].artist["#text"], 22) ));
  //alert(truncateName(oTracks[i].artist["#text"], 22));
  eSpan.className = "lfmTrackArtist";
  document.body.appendChild(eSpan);

  //insert date
  eSpan = document.createElement("span");
  spanTag.appendChild(eSpan);
  eSpan.appendChild(document.createTextNode(   (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))  )); 
  //alert((typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))); 
  eSpan.className = "lfmTrackDate"; 
  document.body.appendChild(eSpan);
 }  
} catch(e) {}
}

以上代码能够起作用的唯一方式是使用document.body.appendChild()。
我尝试在body的底部和内联处调用脚本，以便允许DOM完全加载，但这些方法都没有奏效。
我想要附加它们的div是4个不同的div，即在for循环中每次迭代都需要引用不同的元素。
提前感谢您的帮助！ Myles
编辑：
HTML代码： 
    <link href='css/style.css' rel='stylesheet' type='text/css' />
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
    <link rel="stylesheet" type="text/css" media="all" href="http://beta.mutant-tractor/wp-content/themes/toolbox/style.css" />
    <link href='/css/tabbedContent.css' rel='stylesheet' type='text/css' />
    <script src="/scripts/JQuery/tabbedContent.js" type="text/javascript"></script>
    <script type="text/javascript" src="/scripts/General/lastfmtest.js"></script>
</head>
<body>
    <aside class="widget">
    <h3>I'm listening to...</h3>

    <div class="tabbed_content">
        <div id="lfmArtRow" class="tabs">
            <div class="moving_bg">
                &nbsp;
            </div>
            <script type="text/javascript" src="http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&amp;user=mutant_tractor&amp;api_key=6b85edc3841f3d0935d9dfed9c556634&amp;limit=4&amp;format=json&amp;callback=lfmRecentTracks"></script>
        </div>
    </aside>
    <div id="lfmRecentTracks" style='padding: 15px;'>
        <div class="content">
            <div class="tabbed_content">
                <div class="slide_content">                     
                    <div class="tabslider">
                        <div class="sliding_info">Test 1
                        </div>
                        <div class="sliding_info">Test 2
                        </div>
                        <div class="sliding_info">Test 3
                        </div>
                    <div class="sliding_info">Test 4
                        </div>
                    </div>
                    <br style="clear: both" />
                </div>
            </div>
        </div>
    </div>
    <div id="test">
        </div>
</body>

"我会设置赏金..." 你还没有获得这个特权（http://stackoverflow.com/privileges/set-bounties）。你需要至少75点声望。 - Conrad Frix
6
看到相关的 HTML 标记会非常有帮助。使用“纯 JavaScript”应该没有问题，而将所有内容都转换为 jQuery 的建议听起来虽然出于好意，但值得怀疑，尤其是考虑到您声称对该框架完全不熟悉。 - Pointy
尽管JavaScript允许您不这样做，但请始终在行末加上分号。如果您想保持理智，就必须比JS允许的更严格。 - Jonathon Faust
2
未经解释的负评真是让人沮丧。 - Pointy
@Pointy - 已添加HTML代码到OP。 - Myles Gray
1
请注意，JavaScript与Java非常不同，尽管它在名称中有Java，并且语法表面上相似。名称的重叠仅仅是Netscape和Sun的营销手段。 - adamjford
5个回答
1

而不是

document.body.appendChild( ... );

让您的函数定位到您想要添加内容的 <div>，就像这样：
var targetDiv = document.getElementById('lfmRecentTracks');

（确保页面上只有一个具有该“id”值的元素！！另外，为了兼容IE，请确保名称不是任何其他属性的“名称”属性。）

然后您应该能够执行此操作：

targetDiv.appendChild( whatever );
嗨Pointy，我在FireBug中一直收到“TargetDiv为null”的消息？尽管它已经明确定义了，你有什么想法吗？ - Myles Gray
确保您的代码在浏览器解析目标<div>元素之后运行。这意味着将您的代码放在绑定到窗口“load”事件的函数中，或者将（或导入）脚本放在页面主体的最后。 - Pointy
此外，在 Firebug 控制台中，您应该能够直接键入 "document.getElementById('lfmRecentTracks')" 并获得结果。 - Pointy
谢谢，我只是在尝试弄清楚如何为每个div分配一个单独的ID，以便脚本可以根据它所在的循环将它们放入正确的位置，例如运行一个for()循环，其中有一个内部计数器，然后根据循环目标不同的id，var count = 0; for(){count = count + 1; document.getElementById('sliding_info'+count);} 就像这样。如果您可以针对类进行定位，那就太好了... - Myles Gray
嗯，那听起来和你在这里发布的完全不同。也许需要另一个问题，或者你可以更新这个问题。 - Pointy
这里有一个单独的问题：http://stackoverflow.com/questions/4785648/targeting-class-name-iterations-or-ids-based-on-count-in-for-loop - Myles Gray
1

我不会争论你是否需要jQuery。这不是必需品。然而，如果你想使用它，这就是如何使用jQuery编写相同的代码：

            function calculateDateAgo(secAgo) {
             var agoString, agoRange, agoScaled;
             if(secAgo >= (agoRange = 60*60*24)) 
               agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago";
             else if(secAgo >= (agoRange = 60*60))
               agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago";
             else if(secAgo >= (agoRange = 60))
               agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago";
             else if(secAgo >= -60)
               agoString = "blastin' out now";
             else
               agoString = "soon ;)";
             return agoString;
            }

            function truncateName(name, l) {
            return name.length > l ? name.substr(0,l-2) + "\u2026" : name;
            }

            function lfmRecentTracks(JSONdata) {
                try { 
                    var eImg, eLink, eSpan, divTag, eWrapper, date;
                    var oTracks = new Array().concat(JSONdata.recenttracks.track);
                    for (var i = 0; i < oTracks.length; i++) {
                        //insert coverart image
                        var spanTag  = $('<span class="lfmTrackImageCell tab_item"></span>');
                        $("body").append(spanTag);
                        if(oTracks[i].image[1]["#text"] != "") {
                            eImg = $('<img src="'+oTracks[i].image[1]["#text"]+'" class="lfmTrackImage" />');
                            spanTag.appendChild(eImg);
                        }else{
                            eImg = $('<img src="http://cdn.last.fm/flatness/icons/res/3/track.png" class="lfmTrackImageNotFound" />');
                            spanTag.appendChild(eImg);
                        }
                     }
                    for (var i = 0; i <>[lessthanhere] oTracks.length; i++) {
                      //insert track link
                        spanTag = $('<span class="lfmTrackInfoCell tabslider"><a href='+oTracks[i].url+' target="new" class="lfmTrackTitle">'+truncateName(oTracks[i].name, 25)+'</a></span>');
                        //alert(truncateName(oTracks[i].name, 25));
                        //alert(oTracks[i].url);
                        $("body").append(spanTag);

                        //insert artist name
                        eSpan = $('<span class="lfmTrackArtist">'+truncateName(oTracks[i].artist["#text"], 22)+'</span>');
                        //alert(truncateName(oTracks[i].artist["#text"], 22));
                        $("body").append(eSpan);

                        //insert date
                        date = (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts));
                        eSpan = $('<span class="lfmTrackDate">'+ date +'</span>');
                        spanTag.append(eSpan);
                        //alert((typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))); 
                        $("body").append(eSpan);
                     }
                } catch(e) {}
            }

现在，我不能保证这在生产环境中是否有效，但它看起来是正确的。此外，我不确定您在i <>[lessthanhere] oTracks.length;部分做了什么，所以我将其保留。通常情况下，它应该是i < oTracks.length;。

谢谢Adrian，我会看一下的，那段代码的目的是为了防止SO在那里结束代码部分...当我输入小于号时，它会因某种原因这样做。 - Myles Gray
1

document.getElementById()和appendChild()通常在所有主要浏览器中都能正常工作，除了在IE中使用id和name互换的问题（可能不相关）。这里不需要jQuery。

1

没有理由这样做。jQuery 是 JavaScript，但具有附加功能。如果在 JavaScript 中不起作用，则翻译后的 jQuery 也不会起作用。更不用说要进行额外（不必要的）的翻译工作了。

jQuery添加了浏览器兼容层。因为OP正在使用DOM操作，所以使用框架确实是一个很好的目标，使其在所有浏览器（尤其是IE）中工作而不会变得疯狂。 - acme
getElementById和appendChild都被所有主要浏览器支持。 - Sparafusile
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接