个人中心
gpt4 book ai didi

javascript - 将纯 JS 转换为 JQuery

转载 作者：行者123 更新时间：2023-11-29 10:24:20 24 4
gpt4 key购买 nike

我试图从 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()

我曾尝试在正文底部调用脚本并内联以允许完全加载 DOM，但这些都不起作用。

我试图将它们附加到的 div 是 4 个不同的 div，即在 for 循环中，每个循环都需要引用不同的元素，

提前致谢!迈尔斯

编辑:

HTML代码:



<pre><code> <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>
</code></pre>

最佳答案

代替

document.body.appendChild( ... );

让你的函数找到<div>您希望在何处添加内容，如下所示:

var targetDiv = document.getElementById('lfmRecentTracks');

(一定要确保页面上只有一个元素具有该“id”值!此外，为了 IE，请确保该名称不是“名称”属性在任何事情上。)

那么你应该可以这样做:

targetDiv.appendChild( whatever );

关于javascript - 将纯 JS 转换为 JQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4783639/

24 4 0
文章推荐： javascript - 在 XHR 中使用 multipart/form-data 作为 Content-Type 时获取 '400 Bad Request'
文章推荐： ios - Phonegap Facebook 插件没有响应
文章推荐： javascript - 如何使用 Javascript 从 Canvas 中调整或删除一个对象？
文章推荐： ios - 找不到 AmazonServiceException Unmarshaller.h 文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com