使用 jQuery 绑定、选择和循环 XML 数据

Question

我有一个 XML 文档：

<tab id="1">
    <name>Individual</name>
    <coverLevel>
        <level id="1">
            <month>20</month>
            <week>5</week>
        </level>    
        <level id="2">
            <month>40</month>
            <week>10</week>
        </level>
        <level id="3">
            <month>80</month>
            <week>20</week>
        </level>        
    </coverLevel>
</tab>

<tab id="2">
    <name>Couple</name>
    <coverLevel>
        <level id="1">
            <month>40</month>
            <week>10</week>
        </level>    
        <level id="2">
            <month>80</month>
            <week>20</week>
        </level>
        <level id="3">
            <month>160</month>
            <week>40</week>
        </level>        
    </coverLevel>       
</tab>

<tab id="3">
    <name>Family</name>
    <coverLevel>
        <level id="1">
            <month>80</month>
            <week>20</week>
        </level>    
        <level id="2">
            <month>160</month>
            <week>40</week>
        </level>
        <level id="3">
            <month>320</month>
            <week>80</week>
        </level>        
    </coverLevel>       
</tab>

<tab id="4">
    <name>Single parent family</name>
    <coverLevel>
        <level id="1">
            <month>40</month>
            <week>10</week>
        </level>    
        <level id="2">
            <month>80</month>
            <week>20</week>
        </level>
        <level id="3">
            <month>160</month>
            <week>40</week>
        </level>        
    </coverLevel>       
</tab>

以及调用上述 XML 文档并动态更新表列的 onClick 值的 jQuery。

$(document).ready(function(){

$('table#benefit > thead > tr > th, table#benefit > thead > tr > th > a, table#benefit > tbody > tr > td').click(function(){

    var colIndex = $(this).parent().children().index ($(this));

    var tabPosition = $('ul#coverTabs > li').index ($('.currentTab'));

    var tabPosition = tabPosition + 1

    if (colIndex != 0) {

    $.get('/cash-plan-quote/table.xml', function(data){

        $(data).find('level').each(function() {

            var $level = $(this);
            var $levelID = $level.attr('id');

            if (colIndex == $levelID) {
                var coverLevel = '<span>Level ' + $levelID + ' benefits</span>';
                var monthCost = '<h5>&pound;' + $level.find('month').text() + '</h5>';
                var weekCost = '<h6>&pound;' + $level.find('week').text() + '</h6>';

                $('div.costPanel > h2 > span').replaceWith($(coverLevel));
                $('div.costPanel > div.costs > h5').replaceWith($(monthCost));
                $('div.costPanel > div.costs > h6').replaceWith($(weekCost));
                };
        }); 
    });
     return false;
    };  
});
});

我想做的是在当前标签的 XML 文档中检索数据：

    var tabPosition = $('ul#coverTabs > li').index ($('.currentTab'));

    var tabPosition = tabPosition + 1

因此，当用户单击选项卡时，将调用选项卡的 XML 级别值。我想我可以通过找到选项卡的位置来做到这一点，然后使用它在 XML 文档中检索该选项卡的数据。

标签的 HTML：

<ul id="coverTabs">
    <li class="currentTab"><a href="#">Individual</a></li>
    <li><a href="#">Couple</a></li>
    <li><a href="#">Family</a></li>
    <li><a href="#">Single parent family</a></li>
</ul>

还有一些 jQuery 来设置当前标签的样式：

$(".currentTab").removeClass("currentTab");
$(this).addClass("currentTab");

Answer 1

我通过以下方式在一定程度上实现了这一点：

$('ul#coverTabs > li').live('click', function() {

    //$defaultCell.trigger('click');

    // Removes default class applied in HTML and onClick adds 'currentTab' class
    $(".currentTab").removeClass("currentTab");
    $(this).addClass("currentTab"); 

    // Find number of li
    var tabIndex = $(this).parent().children().index ($(this));
    var tabIndex = $tabIndex + 1;

    // Get table data
    $.get('/cash-plan-quote/table.xml', function(data){

        $(data).find('tab').each(function() {

            var tab = $(this);
            var tabID = tab.attr('id');

            if (tabIndex == tabID) {

                var labelTxt = '<h3 class="benefitHead">' + $tab.find('name').text() + '</h3>';                 

                $('h3.benefitHead').replaceWith($(labelTxt));

            };

        }); 

     });

     return false;      

});

// Retrieve XML price info on column click
$('table#benefit > thead > tr > th, table#benefit > thead > tr > th > a, table#benefit > tbody > tr > td').live('click', function() {   

    // Find columns     
    var colIndex = $(this).parent().children().index ($(this));
    //alert(colIndex);

    // Don't retrieve data on the first column
    if (colIndex != 0) {

        // Find the active tab
        var currentTab = $('ul#coverTabs > li').index ($('.currentTab'));
        var currentTab = currentTab + 1     

        //  Get table.xml
        $.get('/cash-plan-quote/table.xml', function(data){

            $(data).find('tab').each(function(){

                var tab = $(this);
                var tabID = tab.attr('id');

                if (currentTab == tabID){

                    //alert(currentTab);
                    //alert(tabID);

                    tab.find('level').each(function(){

                        var level = $(this);
                        var levelID = level.attr('level_id');

                        var month = level.find('month').text();
                        var week = level.find('week').text();

                        if (colIndex == levelID){

                            var coverLevel = '<span>Level ' + levelID + ' benefits</span>';                 
                            var monthCost = '<h5>&pound;' + month + '</h5>';
                            var weekCost = '<h6>&pound;' + week + '</h6>';

                            $('div.costPanel > h2 > span').replaceWith($(coverLevel));
                            $('div.costPanel > div.costs > h5').replaceWith($(monthCost));
                            $('div.costPanel > div.costs > h6').replaceWith($(weekCost));                           

                        };

                    });

                };                  

            });

        });

        return false;

    };  

});

如果有人知道如何在标签更改但列不更改时反映价格更新，那就太好了。