使用带有jquery的XML来使用文本填充滑块

时间:2012-04-18 18:59:34

标签: xml jquery

在我想要实现jquery滑块的小项目上工作,以便在网站的支持页面上保存推荐书。为了让生活更轻松,我希望推荐书包含在XML文档中。滑块在页面上工作正常,但是当我尝试使用函数从XML文档中获取推荐文本时,它的效果与朝鲜火箭一样。

脚本:

<head>
<title>Crutchfield Customer Support - Online Support Center</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="support.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>

<script src="slider/jquery.bxSlider.min.js" type="text/javascript"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider({
    auto: true,
    autoControls: false,
    nextText: '',
    prevText: ''
    });
  });
</script>

<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "testimonials.xml",
        dataType: "xml",
        success: function(xml) {
            var select = $('#slider1');
            $(xml).find('testimonials').each(function(){
                var text = $(this).find('text').text();
                select.append("<li class='test'>"+text+"</li>");
            });
        }
    });
});
</script>

</head>

滑块的HTML:

    <div id="testimonials">
        <div class="testimonialGroupOne">
            <ul id="slider1">
                <li>loading</li>
            </ul>
        </div>
    </div>

我可能会添加另一个滑块,但可能不会,问题可能与divitis有关吗?

所以基本上没有填充有序列表,到目前为止这里是xml文件:

<?xml version="1.0" encoding="ISO-8859-1"?>
<testimonials>
    <text>"I have been doing business with Crutchfield for over fifteen years and have yet to have a negative experience. Their customer service is second to none."</text>
    <text>"I've been a Crutchfield customer for over 20 years. I've found their customer service and technical support to surpass every other vendor in this business. Without exception, every contact I've had with Crutchfield employees, I have found them to be professional, competent, respectful and patient."</text>
</testimonials>

1 个答案:

答案 0 :(得分:1)

试试这个

var mySlider;
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "data/yourxml.xml",
            dataType: "xml",
            success: function (xml) {


            $(xml).find('testimonials').each(function(){

                xml_name = $(this).find('name').text();

                $('#slide').append('<li>' + xml_name + '</li>')
            });

            $(function () {
                mySlider = $('#slide').bxSlider({
                    auto: true,
                    controls: false
                });

                mySlider.reloadShow();
            })
        }
    });    
});