更新：JavaScript代码显示为子节点

时间：2012-09-26 14:59:09

标签： javascript xml html document.write

解决方案：我明白了。我在zohodiscussions.com的帮助下使用了jQuery而不是JavaScript。

Ajax Google plugin:  http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

**js. file:**
function form_input_classes() {

    jQuery('input[type="text"]').addClass('text');
    jQuery('input[type="password"]').addClass('text');
    jQuery('input[type="checkbox"]').addClass('checkbox');
    jQuery('input[type="radio"]').addClass('radiobutton');
    jQuery('input[type="submit"]').addClass('submit');
    jQuery('input[type="image"]').addClass('buttonImage');

}
function form_labelize() { jQuery(".labelize input:text").clearingInput(); }


var version = jQuery.browser.version;

if (version instanceof Object) { version = version.number(); }

function loadXMLDoc(XMLname) {
    return jQuery.ajax({ async: false, url: XMLname }).responseXML;
}
xmlDoc = loadXMLDoc("demo.xml");
var M = xmlDoc.getElementsByTagName("rotatingImages");
jQuery(function () {
    jQuery('script').remove()
    form_input_classes();
    form_labelize();
    var pauseClicked = function () {
        jQuery('#cycle').cycle('pause');
        jQuery('#play').attr("style", "display:block");
        jQuery('#pause').attr("style", "display:none");
        jQuery('#pause').removeClass("active");
        return false;
    };
    var playClicked = function () {
        jQuery('#cycle').cycle('resume');
        jQuery('#pause').attr("style", "display:block");
        jQuery('#play').attr("style", "display:none");
        jQuery('#pause').addClass("active");
        return false;
    };
    jQuery('#play').attr("style", "display:none");
    jQuery('#pause').attr("style", "display:block");
    jQuery('#pause').click(pauseClicked);
    jQuery('#play').click(playClicked);
    jQuery("#slideNavigation a").focus(function () {
        jQuery(this).blur();
    });


    jQuery('#cycle').cycle({
        fx: 'fade',
        speed: 1000,
        timeout: 5000,
        prev: '#prev',
        next: '#next',
        pager: '#hero-nav ul ',
        pagerAnchorBuilder: function (idx, slide) {
            return '#hero-nav li:eq(' + idx + ') a.page';
        }
    });

})


**HTML references:**
<div id="content" class="clearfix home">
  <div id="hero">
    <div id='rotator'>
      <div id='cycle' class='clearfix'>
       <script type="text/javascript">
        jQuery(M).find('image').each(function (i, img) {
        document.write("<img src='" + jQuery(img).text() + "' />");
        })
       </script>
      </div>
    </div>

     <!--end-rotating-images-->
       <div id="hero-cycle" class="clearfix">
        <div id="hero-nav">
         <ul>
          <script type="text/javascript">
           jQuery(M).each(function (i, item){
           document.write("<li class='hero-text'>");
           document.write("<div class='hero-info clearfix'>");
           document.write("<a href='" +
     jQuery(item).find('filePath').text() + "' target='_blank'>" +
     jQuery(item).find('description').text()
     + "</a>");
           document.write("</div>")
           document.write("<a class='page' href='#'></a></li>")
          })
          </script>

      </ul>
      <div id="annc_controls">
         <a href="#" id="play">
         <img src="images/blue_play.gif" alt="Play" border="0" style="vertical-align: text-bottom"/></a>
         <a href="#" id="pause">
         <img src="images/blue_pause.gif" alt="Stop" border="0" style="vertical-align: text-bottom"/>
         </a>
      </div>
      <!--<div id="slideNavigation"></div>-->
      </div>
      <!-- /#hero-nav -->
      </div>
      <!-- /#hero-cycle -->
      </div>
      <!-- /#hero -->
      </div>

我更新了我的代码，旋转的图像与描述一致。我唯一的问题是首先加载javascript代替第一张图片。只有3个图像，代码显示第一个，然后是图像＃1，依此类推。这是ActiveXObject和IE 9的浏览器问题吗？我遇到了与FireFox最新版本类似的问题。此浏览器中没有显示任何内容。有帮助吗？ -

.html文件：

<head><script type="text/javascript">
<!--
    function loadXMLDoc(XMLname)
    //
    {
        var xmlDoc;

        if (window.XMLHttpRequest) {
            xmlDoc = new window.XMLHttpRequest();
            xmlDoc.open("GET", XMLname, false);
            xmlDoc.send("");
            return xmlDoc.responseXML;
        }
        // IE 5 and IE 6

        else if (ActiveXObject("Microsoft.XMLDOM")) {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.load(XMLname);
            return xmlDoc;
        }
        alert("Error loading document!");
        return null;
    }


    xmlDoc = loadXMLDoc("demo.xml");

    var M = xmlDoc.getElementsByTagName("rotatingImages");

    //-->

</script>
</head>
<div id="hero">
  <div id='rotator'>
   <div id='cycle' class='clearfix'>
     <script type="text/javascript">
      for (i = 0; i < M.length; i++) {
      document.write("<img src='" + xmlDoc.getElementsByTagName("image")[i].childNodes[0].nodeValue + "' />");
      }
     </script> 
      </div>
     </div>
    </div>
  <!--end-rotating-images-->
   <div id="hero-cycle" class="clearfix">
      <div id="hero-nav">
        <ul>
          <script type="text/javascript">
              for (i = 0; i < x.length; i++) { // Start 3 Rotating Images 
               document.write("<li class='hero-text'>");
               document.write("<div class='hero-info clearfix'>");
               var linkValue = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
               var linkValue = x[i].getElementsByTagName("filePath")[0].childNodes[0].nodeValue;
               document.write("<a href='" + linkValue + "' target='_blank'>");
               linkValue = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
               document.write(linkValue);
               document.write("</a>");
               // End description for Rotating Images
               document.write("</div>");
               document.write("<a class='page' href='#'></a></li>");
          }

       </script>
   </ul>
   <div id="annc_controls">
    <a href="#" id="play">
    <img src="images/blue_play.gif" alt="Play" border="0" style="vertical-align: text-bottom" /></a>
    <a href="#" id="pause">
    <img src="images/blue_pause.gif" alt="Stop" border="0" style="vertical-align: text-bottom" />
    </a>
   </div>
  </div>
 </div>
</div>
</div>
</div>
</div>
<div>

XML文件：

`<?xml version="1.0" encoding="utf-8"?>
<homepage>
  <rotatingImages>
    <item>
      <image>manage/newImages/soldier-sunset.jpg</image>
      <description>My Test 1</description>
      <filePath>http://www.sigar.mil/newsroom/spotlight/12/2012-sep-05-sopko-visits-afghanistan.html </filePath>
    </item>
    <item>
      <image>manage/newImages/2012-04-03-jet.jpg</image>
      <description>My Test3</description>
      <filePath>http://www.sigar.mil/newsroom/spotlight/12/2012-sep-05-sopko-visits-afghanistan.html </filePath>
    </item>
    <item>
      <image>manage/newImages/sigar-brochre.jpg</image>
      <description>My Test2 </description>
      <filePath>http://www.sigar.mil/newsroom/spotlight/12/2012-sep-05-sopko-visits-afghanistan.html </filePath>
    </item>
  </rotatingImages>
 </homepage>`

3 个答案:

答案 0 :(得分：0)

由于rotator和cycle元素是动态添加的，因此当页面加载并运行jQuery函数时它们不存在。您需要委托.on()，以便在元素添加时添加处理程序。有关.on的信息，请参阅http://api.jquery.com/on/并向下滚动到有关直接和委派事件的部分。

您的网页的另一个问题是每次通过for循环使用相同的ID。 ID必须是唯一的。重复的ID来自此代码：

for (i = 0; i < x.length; i++) {
   document.write("<div id='rotator'><div id='cycle' class='clearfix'><div class='entry clearfix'>");

每次循环都会添加ID为'rotator'，'cycle'，'hero-cycle'和'hero-nav'的DIV。

答案 1 :(得分：0)

将jQuery('#cycle').cycle({ … });代码放入jQuery(document).ready函数。

答案 2 :(得分：0)

**SOLUTION:** I figured it out. I used jQuery instead of JavaScript with a little help from zohodiscussions.com.

Ajax Google plugin:  http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

**js. file:**
function form_input_classes() {

    jQuery('input[type="text"]').addClass('text');
    jQuery('input[type="password"]').addClass('text');
    jQuery('input[type="checkbox"]').addClass('checkbox');
    jQuery('input[type="radio"]').addClass('radiobutton');
    jQuery('input[type="submit"]').addClass('submit');
    jQuery('input[type="image"]').addClass('buttonImage');

}
function form_labelize() { jQuery(".labelize input:text").clearingInput(); }


var version = jQuery.browser.version;

if (version instanceof Object) { version = version.number(); }

function loadXMLDoc(XMLname) {
    return jQuery.ajax({ async: false, url: XMLname }).responseXML;
}
xmlDoc = loadXMLDoc("demo.xml");
var M = xmlDoc.getElementsByTagName("rotatingImages");
jQuery(function () {
    jQuery('script').remove()
    form_input_classes();
    form_labelize();
    var pauseClicked = function () {
        jQuery('#cycle').cycle('pause');
        jQuery('#play').attr("style", "display:block");
        jQuery('#pause').attr("style", "display:none");
        jQuery('#pause').removeClass("active");
        return false;
    };
    var playClicked = function () {
        jQuery('#cycle').cycle('resume');
        jQuery('#pause').attr("style", "display:block");
        jQuery('#play').attr("style", "display:none");
        jQuery('#pause').addClass("active");
        return false;
    };
    jQuery('#play').attr("style", "display:none");
    jQuery('#pause').attr("style", "display:block");
    jQuery('#pause').click(pauseClicked);
    jQuery('#play').click(playClicked);
    jQuery("#slideNavigation a").focus(function () {
        jQuery(this).blur();
    });


    jQuery('#cycle').cycle({
        fx: 'fade',
        speed: 1000,
        timeout: 5000,
        prev: '#prev',
        next: '#next',
        pager: '#hero-nav ul ',
        pagerAnchorBuilder: function (idx, slide) {
            return '#hero-nav li:eq(' + idx + ') a.page';
        }
    });

})


**HTML references:**
<div id="content" class="clearfix home">
  <div id="hero">
    <div id='rotator'>
      <div id='cycle' class='clearfix'>
       <script type="text/javascript">
        jQuery(M).find('image').each(function (i, img) {
        document.write("<img src='" + jQuery(img).text() + "' />");
        })
       </script>
      </div>
    </div>

     <!--end-rotating-images-->
       <div id="hero-cycle" class="clearfix">
        <div id="hero-nav">
         <ul>
          <script type="text/javascript">
           jQuery(M).each(function (i, item){
           document.write("<li class='hero-text'>");
           document.write("<div class='hero-info clearfix'>");
           document.write("<a href='" +
     jQuery(item).find('filePath').text() + "' target='_blank'>" +
     jQuery(item).find('description').text()
     + "</a>");
           document.write("</div>")
           document.write("<a class='page' href='#'></a></li>")
          })
          </script>

      </ul>
      <div id="annc_controls">
         <a href="#" id="play">
         <img src="images/blue_play.gif" alt="Play" border="0" style="vertical-align: text-bottom"/></a>
         <a href="#" id="pause">
         <img src="images/blue_pause.gif" alt="Stop" border="0" style="vertical-align: text-bottom"/>
         </a>
      </div>
      <!--<div id="slideNavigation"></div>-->
      </div>
      <!-- /#hero-nav -->
      </div>
      <!-- /#hero-cycle -->
      </div>
      <!-- /#hero -->
      </div>
相关问题
最新问题