I have an XML document thus:
<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>
And jQuery which calls said XML document and dynamically updates values onClick of a table column.
$(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>£' + $level.find('month').text() + '</h5>';
var weekCost = '<h6>£' + $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;
};
});
});
What i would like to do is retrieve the data in the XML doc for the current tab:
var tabPosition = $('ul#coverTabs > li').index ($('.currentTab'));
var tabPosition = tabPosition + 1
So when a user clicks on a tab the XML level values of the tab will be called. I thought i could do this by finding the position of the tab and then use that to retrieve the data for that tab in the XML doc.
The HTML for the tabs:
<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>
And some more jQuery to set the styling of the current tab:
$(".currentTab").removeClass("currentTab");
$(this).addClass("currentTab");
I have achieved this to some extent with the following:
$('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>£' + month + '</h5>';
var weekCost = '<h6>£' + week + '</h6>';
$('div.costPanel > h2 > span').replaceWith($(coverLevel));
$('div.costPanel > div.costs > h5').replaceWith($(monthCost));
$('div.costPanel > div.costs > h6').replaceWith($(weekCost));
};
});
};
});
});
return false;
};
});
If anyone knows how to reflect the price update when a tab changes but the column doesn't that would be great.
精彩评论