0

我正在使用http://www.symfocal.com/使用 symfony 应用程序（2.3）

我尝试更改日历的显示方式，但 jquery 遇到了一些问题：

这是关于我的问题的修改代码的一部分。

带有 jquery 的树枝文件：

<script>
...
jQuery(document).ready(function() {

var cal1 = $('#cal1');
var cal2 = $('#cal2');

function fillCalendar(mois, annee, cal)
{
    $(cal).css('display', 'none');
    $(cal).find('a').removeClass().unbind();
    {% if admin == false %}
    $(cal).find('a').click(function(e){e.preventDefault();});
    {% endif %}

    ...
    var id = $(cal).attr('id');

    $.post(url,{
        month: mois,
        year: annee,
       },function(data){
            if(data.responseCode==200 )
            {
                var days_previous_month=data.days_previous_month;
                var nb_days_prev=data.nb_days_prev;
                $('#'+id+'_title').html(data.current_month);
                var count=1;
                while(count<43)
                {
                    {% if admin %}
                    if(data.calendar[(count-1)].dates!="")
                    {
                        $('#'+id+'_cell_'+count).attr("title", data.calendar[(count-1)].dates).click(changeState);
                    }
                    else
                    {
                        $('#'+id+'_cell_'+count).click(function(e){e.preventDefault();});
                    }
                    {% endif %}
                    if(data.calendar[(count-1)].booked==-1) $('#'+id+'_cell_'+count).html(days_previous_month - nb_days_prev + count);
                    else $('#'+id+'_cell_'+count).html(data.calendar[(count-1)].fill);
                    if(data.calendar[(count-1)].booked==1) $('#'+id+'_cell_'+count).addClass(data.calendar[(count-1)].classe);
                    else if(data.calendar[(count-1)].booked<0) $('#'+id+'_cell_'+count).addClass("dates_preview");
                    count++;
                }
                $(cal).css('display', 'block');
            }
            else
...
function changeMonths(step)
{
    gap = gap + step;

    var newMonth = month + (1 * gap)%12;
    var gapYear = (1 * gap)/12;
    var newYear = year + gapYear - gapYear%1;
    if (newMonth<=0)
    {
        newMonth+=12;
    }

    {% for item in items %}
        fillCalendar(newMonth-12*Math.floor((newMonth)/13), newYear+Math.floor((newMonth)/13), 'cal{{ item.id }}' );
    {% endfor %}
}
...
$(window).load(function(){
    changeMonths(0);
});


});    
</script>

和 html 部分 - 带有树枝包括：

<div class="calendar_wrapper">
    <div id="cal1" class="calendar">
        <table class="tab_calendar" align="center">
            <tr>
                <td class="title_calendar" colspan="43" width="100%">
                    <span id="cal1_title"></span>
                </td>
            </tr>
            <tr>
                <td  class="tech" >
                <span>Technicien</span>
                </td>
                {% for i in 1..6 %}
                    <td  class="cell_jour" >
                    <span>Lun</span>
                    </td>
                    <td  class="cell_jour" >
                    <span>Mar</span>
                    </td>
                    <td  class="cell_jour" >
                    <span>Mer</span>
                    </td>
                    <td  class="cell_jour" >
                    <span>Jeu</span>
                    </td>
                    <td  class="cell_jour" >
                    <span>Ven</span>
                    </td>
                    <td  class="cell_jour" >
                    <span>Sam</span>
                    </td>
                    <td  class="cell_jour" >
                    <span>Dim</span>
                    </td>
                {% endfor %}
            </tr>
            {% for item in items %}
                <tr>
                    <td class="{{ item.id }}">{{ item.name }}</td>
                    {% for i in 1..42 %}
                        <td class="cell_calendar"><a id="cal{{ item.id }}_cell_{{ i }}" href="#"></a></td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </table>
    </div>
</div>

我对正在发生的事情的理解：

$(window).load(函数收费 changeMonths(0)

changeMonths 为每个项目调用函数 fillCalendar（此时用于测试有两个项目（id 1 和 id 2）

这是我有一个错误：

指令：

var id = $(cal).attr('id');

没有得到 id - 它的未定义

但是作为参数接收的变量 cal 是 cal1 & 然后是 cal2 并且应该返回 id，即 cal1 或 cal2。

有人可以帮我解决这个问题吗？

编辑：我按照 ihsan 的回答 - 现在更好了，但只有第一行日历填满了月份

console.log(cal); shows now :

#cal1 
#cal2

编辑 2：好的，我不得不修改我的 html 以使 cal2 也可以工作 - 感谢您的帮助

4

1 回答 1

0

html部分：

...
<td id="cal{{ item.id }}">{{ item.name }}</td>

js部分：

...
fillCalendar(newMonth-12*Math.floor((newMonth)/13), newYear+Math.floor((newMonth)/13), '#cal{{ item.id }}' );
于 2013-11-02T01:23:40.747 回答