如何讓多UL列表的價值

這是我的代碼如何讓多UL列表的價值

 <ul class="nav nav-pills ranges" id="date_range"> 
      <li class="active"><a href="#" data-range='1' data-toggle="tab">Last Day</a></li> 
      <li><a href="#" data-range='7'>Last Week</a></li> 
      <li><a href="#" data-range='30'>Last Month</a></li> 
    </ul>

和

<ul class="nav nav-pills ranges" id="data_type"> 
    <li class="active"><a href="#" data-type='timeInMs' data-toggle="tab">Response</a></li> 
    <li><a href="#" data-type='speed_download'>Speed Download</a></li> 
    <li><a href="#" data-type='dnsTime'>DNS</a></li> 
    <li><a href="#" data-type='size'>Page Size</a></li>

我想獲得的數據範圍和數據類型的值與每個L1活動

這是我的代碼

$('ul.ranges a').click(function(e) { 
     e.preventDefault(); 

     // Get the number of days from the data attribute 
     days = $('ul#date_range li.active a').attr('data-range'); 

     data_type = $('ul#date_type li.active a').attr('data-type');   

     // Make things pretty to show which button/tab the user clicked 
     el.parent().addClass('active'); 
     el.parent().siblings().removeClass('active'); 



    });

來源

2014-05-24 Thoman

使用。數據（「」）;而不是.attr（「」） –

使用data()，也爲讓裏使用closest()作爲parent()不是作品，如果HTML被改變。

這樣做：

$('ul.ranges a').click(function(e) { 

      e.preventDefault();   

      $(this).closest("li").addClass('active'); 
      $(this).closest("li").siblings().removeClass('active'); 

      // Get the number of days from the data attribute 
      var days = $('ul#date_range li.active a').data('range'); 

      var data_type = $('ul#data_type li.active a').data('type'); 

      console.log(days+":"+data_type) 

     });

FIDDLE DEMO

來源

2014-05-24 20:28:49

檢查編輯後的小提琴演示附加 –

並單擊不顯示當前活動，顯示其他活動 – Thoman

未獲得活動值時顯示，獲取防止活動值 – Thoman

從$('ul#date_range li.active a')刪除.active類，你還沒有分配該類直到後來

來源

2014-05-24 20:27:23

如何讓多UL列表的價值

回答

相關問題