0

現在、約 2 日間悩まされている問題があり、他の場所での反応が低いようです。XMLのその文字列をデータに沿ってAJAXタブに実行しています。

次に、Javascript を使用して、必要な場所で XML データを中断して表示するだけで、データの一部を、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 に答える