JQuery 选择器的困难

发布于 2024-12-10 18:19:32 字数 6215 浏览 0 评论 0原文

好吧,我知道我在这里遗漏了一些东西。我正在尝试 ajaxify 日历。日历加载了指向其他页面的 html 链接。我有部分工作正常,但我在导航链接到其他月份时遇到困难。

我可以加载日历、显示日历,甚至可以在单击事件链接时打开和关闭模式对话框。我无法开始工作的是更改表头中上一个和下一个链接的 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>

Ok, I know I am missing something here. I am trying to ajaxify a calendar. The calendar loads with html links to other pages. I have part of it working but I am having difficulty with the navigation links to other months.

I am able to load the calendar, display it, and even get the modal dialog to open and close when the event link is clicked. What I can't get to work is the changing of the url for the prev and next links in the table header.

Thank you for you help.

Here is the 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">>></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;
    });

  }
});
});

The html:

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

<tbody><tr>
<th><a id="calendar-prev-nav" href="http://localhost/mysite/calendar/index/2011/09"><<</a></th>
<th colspan="5">October 2011</th>
<th><a id="calendar-next-nav" href="http://localhost/mysite/calendar/index/2011/11">>></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"> </td><td class="calendar-day"> </td><td class="calendar-day"> </td><td class="calendar-day"> </td><td class="calendar-day"> </td><td class="calendar-day"> </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"> </td><td class="calendar-day"> </td><td class="calendar-day"> </td><td class="calendar-day"> </td><td class="calendar-day"> </td>
</tr>

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

柳絮泡泡 2024-12-17 18:19:32

使用 .attr 方法时,可以将要设置属性的值作为第二个参数传递给该方法。

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

查看 jquery 文档 了解更多说明。

When you use the .attr method, you pass the value you want to set the attribute to in as the second parameter to the method.

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

Check out the jquery documentation for more explanation.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文