2

我正在尝试从 XML 文件中读取设置。我认为我没有正确加载对象，或者我的选择器没有按照我的想法进行。函数内部的日志消息appendImages不执行，我不知道为什么。

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "banner_slider/settings.xml",
    dataType: "xml",
    success: startSlider
  });
});

function startSlider(xml) {
  var bWidth = $('#banner').width(), bHeight = $('#banner').height();
  bWidth += 'px';
  bHeight += 'px';
  $('#banner').attr( 'style', 'height: '+bHeight );
  $('#banner').attr( 'style', 'width: '+bWidth );
  $('#banner img').attr( 'id', 'origImg');
  appendImages( bWidth, bHeight, xml );
  $('#origImg').remove();
  $('#banner').cycle();
}

function appendImages( bWidth, bHeight, xml ) {
  console.log('appendImages executed');
  $(xml).find('img').each(function() {
    var path = $(this).text(); 
    console.log('path: '+path); 
    $('#banner').append('<img width="'+bWidth+'" height="'+bHeight+'" src="'+path+'" />');
  });
}

XML 示例：

<?xml version="1.0" encoding="utf-8" ?>
<images>
    <img>test1</img>
    <img>test2</img>
    <img>test3</img>
</images>
4

3 回答 3

1

试试这个，你必须将响应传递给成功处理程序，我已经修改了你的代码以删除设置，但你可以添加它们并使用.parseXML而不是使用 jquery 的 DOM 遍历方法来遍历 xml

 function startSlider(xml) {  
     console.log("xml recieved successfully");
     console.log(window.$xml);
  appendImages(window.$xml);

}

function appendImages( xml ) {
  console.log('appendImages executed');
  xmlDoc = $.parseXML( xml ),
    $xml = $( xmlDoc ),
    $imgArr = $xml.find( "img" );
    console.log($imgArr);
    $($imgArr).each(function(i,j){
    console.log($(j).text());

    });

}
$(function(){
    window.$xml="<images><img>test1</img><img>test2</img><img>test3</img></images>";

$.ajax({
     type: "GET",
     url: "/echo/json/",
     dataType: "xml",  
     success: startSlider(window.$xml)
 });
});

DMEO

于 2012-11-16T19:14:41.200 回答
0

我认为您需要将数据从 ajax 回调正确地移交给您的函数。

  success: function(data, textStatus, jqXHR) {
        startSlider(data);
   }

在JSFIDDLE上查看这个演示

于 2012-11-16T19:04:24.877 回答
0

一旦 Musa 修复了语法错误，我的代码就会按预期运行。谢谢你。

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "banner_slider/settings.xml",
    dataType: "xml",
    success: startSlider
  });
});

function startSlider(xml) {
  var bWidth = $('#banner').width(), bHeight = $('#banner').height();
  bWidth += 'px';
  bHeight += 'px';
  $('#banner').attr( 'style', 'height: '+bHeight );
  $('#banner').attr( 'style', 'width: '+bWidth );
  $('#banner img').attr( 'id', 'origImg');
  appendImages( bWidth, bHeight, xml );
  $('#origImg').remove();
  $('#banner').cycle();
}

function appendImages( bWidth, bHeight, xml ) {
  console.log('appendImages executed');
  $(xml).find('img').each(function() {
    var path = $(this).text(); 
    console.log('path: '+path); 
    $('#banner').append('<img width="'+bWidth+'" height="'+bHeight+'" src="'+path+'" />');
  });
}

示例 XML：

<?xml version="1.0" encoding="utf-8" ?>
<images>
    <img>test1</img>
    <img>test2</img>
    <img>test3</img>
</images>

http://jsfiddle.net/mowglisanu/yQLx6/

于 2012-11-19T03:25:31.470 回答