0

我有一个问题已经困扰我大约 2 天了，而且似乎在其他地方得到的响应很低。我正在将 XML 的字符串沿着数据运行到 AJAX 选项卡中。

然后使用 Javascript 来中断并仅在我想要的位置显示 XML 数据，然后我希望一些数据通过 Lightbox 出现，而​​不是通过“阅读更多”超链接出现在 AJAX 选项卡上。

一些数据正常显示，但灯箱根本不工作，脚本已正确加载和链接，但我似乎无法弄清楚为什么它不工作。每个灯箱都是通过脚本生成的，但没有灯箱或链接正常工作。

因为一些 Lightbox 的工作使用与 div 锚点类似的东西，所以它似乎是锚定。

对于实时版本，请参阅：

http://universitycompare.com/university-guide/london-metropolitan-university/

或者，我所做的脚本如下：

<script type="text/javascript">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","http://universitycompare.com/wp-content/themes/blue-and-grey/XML/<?php echo the_field('university_xml_courses'); ?>",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='0'>");
var x=xmlDoc.getElementsByTagName("KISCOURSE");
for (i=0;i<x.length;i++)

  { 
  document.write("<tr id='CourseArea'><td><h3 id='CourseTitle'>");

  // TITLE
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</h3>");
  document.write("<p class='ForP'>-&nbsp;&nbsp;");
  document.write(x[i].getElementsByTagName("MODE")[0].childNodes[0].nodeValue); 
  document.write("</p><div class='clear'></div>");

  // UCAS CODE
  document.write("<p id='ucascode'>");
  document.write("<b>UCAS CODE</b>&nbsp;&nbsp;&nbsp;");
  document.write(x[i].getElementsByTagName("UCASCOURSEID")[0].childNodes[0].nodeValue);
  document.write("</p>"); 

  // READ MORE LIGHTBOX
  document.write("<img src='http://universitycompare.com/wp-content/themes/blue-and-grey/images/info-icon.png' width='15' style='margin:0px 2px 0px -4px;'>");
  document.write("<a id='various' href='#inline'>Read More</a>&nbsp;&nbsp;&nbsp;");

  // VISIT COURSE LINK
  document.write("<a class='courselink' href='");
  document.write(x[i].getElementsByTagName("CRSEURL")[0].childNodes[0].nodeValue);
  document.write("' target='_blank'>Visit course website</a>");
  document.write("</td></tr>");

  // LIGHTBOX INFO
  document.write("<div class='inline' style='display:none; width:500px; height:500px;'>"); 
  document.write(x[i].getElementsByTagName("CRSEURL")[0].childNodes[0].nodeValue); 
  document.write("</div>");
  }

document.write("</table>");

</script>
4

1 回答 1

0

据我所知，您正在将 fancybox 绑定到选择器.various（带有 的元素class="various"）：

$(document).ready(function() {
    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

...但是，您的内容中没有任何具有此类的元素，但是

<a id='various' href='#inline'>Read More</a>

也许你的意思是

<a class='various' href='#inline'>Read More</a>

其他建议：修复一些 html 语法不一致的问题，例如

  • 您的<head>开始标签丢失。

  • 将所有脚本放在您的<head>或<body>部分内，但不要放在两者之间......这个：

    <head>
.
</head>
<script> ....</script>
<body>
.
</body>

    ...不推荐

  • 其他 javascript 错误可能会影响其他 jQuery 插件的行为。您的页面抛出此 js 错误：

    Timestamp: 06/10/2012 5:48:24 PM
Error: TypeError: $(this).get(0) is undefined
Source File: http://universitycompare.com/wp-content/themes/blue-and-grey/jquery.ticker.js
Line: 25
于 2012-10-07T01:08:17.920 回答