Question

我有一个问题，一直困扰我2天左右，似乎在其他地方得到的回应很低。我正在将XML的数据字符串运行到AJAX选项卡中。

然后使用Javascript，打破并只显示我想要的XML数据，然后我想通过Lightbox显示一些数据，而不是通过'read more'超链接在AJAX选项卡上显示。

有些数据通常出现，但Lightbox根本不工作，脚本加载和链接正确，但我似乎无法解决为什么它不工作。每个Lightbox都是通过脚本生成的，但没有Lightbox或链接正常工作。

因为一些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>

Answer 1

据我所知，你将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'
    });
});

...但是，您的内容中没有任何元素包含 class 但

<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

Fancybox不使用HTML / Java驱动内容

1 个答案: