3

「slider.xml」というXMLファイルを読み取るページに画像スライダーがあります。これは次のようになります。

<slider>
<slide>
<link>http://www.example.com/1</link>
<path>http://image.jpg</path>
</slide>
</slider>

複数の「スライド」要素がありますが、スペース上の理由からそれらを含めませんでした。次のようなHTMLがあります。

<body>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</body>

このXMLファイルを読み取り、「link」属性をHTMLページの「div」要素にtitle属性として書き込みます。私はそれをこのように見せたい：

<body>
<div class="slide" title="http://www.example.com/1"></div>
<div class="slide" title="http://www.example.com/2"></div>
<div class="slide" title="http://www.example.com/3"></div>
<div class="slide" title="http://www.example.com/4"></div>
<div class="slide" title="http://www.example.com/5"></div>
</body>

これまで私はこれを試しましたが、運がありませんでした：

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "slider.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('slide').each(function(){
                var url = $(this).find('link').text();
                $('.slide').attr('title', url);
            }); 
        }   
    }); 
});

XMLファイルの読み取りに問題はありませんが、XML属性を解析してさまざまなdivにアタッチした後に問題が発生します。ループを作成してxml属性を配列に格納する必要がありますか？これを行うためのより良い方法はありますか？

また、XMLやHTMLを編集できません。

4

1 に答える 1

2

すべてのdiv$('.slide')を選択して呼び出すため、すべてのdivのタイトルは同じになります。

これは機能するはずです：

$(document).ready(function () {
    var slide = $('.slide');
    $.ajax({
        type: "GET",
        url: "slider.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('slide').each(function(i){
                var url = $(this).find('link').text();
                slide.eq(i).attr('title', url);
            }); 
        }   
    }); 
});
于 2012-10-03T20:13:49.430 に答える