2011-10-19 49 views
-1

好吧,我知道我在這裏錯過了一些東西。我正在嘗試ajaxify日曆。日曆加載到其他頁面的HTML鏈接。我的部分工作正在進行,但我在其他幾個月的導航鏈接上遇到了困難。JQuery Selector難點

我可以加載日曆,顯示它,甚至可以在單擊事件鏈接時打開和關閉模式對話框。我無法工作的是改變表頭中的prev和next鏈接的url。

謝謝你的幫助。

這裏是jQuery的:

$(document).ready(function() { 

/*-------------------------------------*/ 
/*  Event Calendar Methods  */ 
/*-------------------------------------*/ 
$.ajax({ url: '<?php echo site_url("servicebay/ajax/getCalendar");?>', success: function(data) { 

    // Setup the calendar 
    $("#calendar").html(data); 
    // Setup event lists 
    $('.event-detail-link').click(function(eventdata){ 
     var href = $(this).attr('href'); 
     //alert('Event Click'+ $(this).text()+' '+href); 
     $.ajax({url: href, success: function(data) { 
      $('#basic-modal-content').html(data); 
      $('#basic-modal-content').modal({escClose:true, backgroundColor:"#FFCC00", borderColor:"#FFCC00"}); 
      return false; 
     }} 
     ); //End click() 
     // Event-detail-link failure 
     return false; 
    }); 

    /* Calendar Next Link */ 
    /* <a id="calendar-next-nav" href="http://localhost/mysite/calendar/index/2011/11">&gt;&gt;</a>*/  
    $('#calendar-next-nav').click(function(eventdata){ 
     var href = $(this).attr('href'); 
     var x = href.substring(x.lastIndexOf("/")+1, x.lastIndexOf("/")); 
     alert('Clicked'+ x); 
     $(this).attr('href') ='/servicebay/ajax/getCalendar/'+x; 
     return false; 
    }); 

    } 
}); 
}); 

的HTML:

<div id="calendar"><table id="" class="calendar"> 

<tbody><tr> 
<th><a id="calendar-prev-nav" href="http://localhost/mysite/calendar/index/2011/09">&lt;&lt;</a></th> 
<th colspan="5">October&nbsp;2011</th> 
<th><a id="calendar-next-nav" href="http://localhost/mysite/calendar/index/2011/11">&gt;&gt;</a></th> 
</tr> 

<tr> 
<td>Su</td><td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td> 
</tr> 

<tr class="calendar-days"> 
<td class="calendar-day">&nbsp;</td><td class="calendar-day">&nbsp;</td><td class="calendar-day">&nbsp;</td><td class="calendar-day">&nbsp;</td><td class="calendar-day">&nbsp;</td><td class="calendar-day">&nbsp;</td><td class="calendar-day"><div class="calendar-day-num">1</div></td> 
</tr> 

<tr class="calendar-days"> 
<td class="calendar-day"><div class="calendar-day-num">2</div></td><td class="calendar-day"><div class="calendar-day-num">3</div></td><td class="calendar-day"><div class="calendar-day-num">4</div></td><td class="calendar-day"><div class="calendar-day-num">5</div></td><td class="calendar-day"><div class="calendar-day-num">6</div></td><td class="calendar-day"><div class="calendar-day-num">7</div></td><td class="calendar-day"><div class="calendar-day-num">8</div></td> 
</tr> 

<tr class="calendar-days"> 
<td class="calendar-day"><div class="calendar-day-num">9</div></td><td class="calendar-day"><div class="calendar-day-num">10</div></td><td class="calendar-day"><div class="calendar-day-num">11</div></td><td class="calendar-day"><div class="calendar-day-num">12</div></td><td class="calendar-day"><div class="calendar-day-num">13</div></td><td class="calendar-day"><div class="calendar-day-num">14</div></td><td class="calendar-day"><div class="calendar-day-num">15</div></td> 
</tr> 

<tr class="calendar-days"> 
<td class="calendar-day"><div class="calendar-day-num">16</div></td><td class="calendar-day"><div class="calendar-day-num">17</div></td><td class="calendar-day"><div class="calendar-day-num">18</div></td><td class="calendar-day"><div class="calendar-day-num highlight">19</div></td><td class="calendar-day"> 
       <div class="calendar-day-num">20</div> 
       <div class="calendar-content"><ul class="calendar-event-list"><li><a class="event-detail-link" href="http://localhost/mysite/servicebay/ajax/eventDetail/7">Oil Change</a></li></ul></div> 
      </td><td class="calendar-day"><div class="calendar-day-num">21</div></td><td class="calendar-day"><div class="calendar-day-num">22</div></td> 
</tr> 

<tr class="calendar-days"> 
<td class="calendar-day"><div class="calendar-day-num">23</div></td><td class="calendar-day"><div class="calendar-day-num">24</div></td><td class="calendar-day"><div class="calendar-day-num">25</div></td><td class="calendar-day"><div class="calendar-day-num">26</div></td><td class="calendar-day"><div class="calendar-day-num">27</div></td><td class="calendar-day"><div class="calendar-day-num">28</div></td><td class="calendar-day"><div class="calendar-day-num">29</div></td> 
</tr> 

<tr class="calendar-days"> 
<td class="calendar-day"><div class="calendar-day-num">30</div></td><td class="calendar-day"><div class="calendar-day-num">31</div></td><td class="calendar-day">&nbsp;</td><td class="calendar-day">&nbsp;</td><td class="calendar-day">&nbsp;</td><td class="calendar-day">&nbsp;</td><td class="calendar-day">&nbsp;</td> 
</tr> 

</tbody></table></div> 

回答

2

當您使用.attr方法,你傳遞的價值要在設定的屬性作爲第二個參數該方法。

$('selector').attr('attribute', 'value_to_set'); 

查看jquery documentation瞭解更多解釋。