바인딩, 선택 및 jQuery를

Question

와 XML 데이터를 통해 반복 I는 XML에 문서를 가지고 : (A)의 값 온 클릭을 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> 

그리고 jQuery를 테이블 열. 그래서

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

    var tabPosition = tabPosition + 1 

탭에 사용자가 클릭 탭의 XML 레벨 값이 될 것입니다 : 내가하고 싶은 무엇

$(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 문서에서 데이터를 검색하다 라는. 탭의 위치를 ​​찾아 XML 문서의 해당 탭에 대한 데이터를 검색하는 데 사용할 수 있다고 생각했습니다.

탭의 HTML : 나는 다음과 어느 정도이를 달성

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

Answer 1

:

<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를 현재 탭의 스타일을 설정하려면

$('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; 

    }; 

}); 

탭을 변경할 때 가격 업데이트를 반영하는 방법을 아는 사용자는 누구나 열 ould 대단하다.