jquery - 为元素添加自动刷新功能

时间:2011-05-02 08:36:52

标签: javascript jquery html

以下代码用于调用网站模块并构建下面列出的html代码。请看下面的问题。

$.ajaxSetup ({
    cache: false
});
var loadUrl = "test_app_module.asp";


function update(rowIdValue) {

    $.get(
        loadUrl,
        { passRowId: rowIdValue },
        function(responseText){
            $("#contentUpdateRefresh").html(responseText);


            $('#airplane div a').click(function()
                    {
                        // Asign value of the link target
                        var thisSeatStatus = $(this).parent('div').attr('class');
                        var thisSeatStatus = $.trim(thisSeatStatus);
                        var thisSeatStatusStart = thisSeatStatus ;

                        if(thisSeatStatusStart=="available"){

                            $(this).removeClass();
                            $(this).addClass('selected');

                            var thisSeat = $(this).parent('div').parent('li').attr('class');
                            // Toggle selected class on/off
                            $(this).parent('div').removeClass();
                            $(this).parent('div').addClass('selected');
                            this.blur();

                            var thisEventDtl = $("[id^=aTheDtlIdNo_]").attr('id');
                            var thisEventDtl = thisEventDtl.replace( /aTheDtlIdNo_/, '');
                            var thisEventDtl = $.trim(thisEventDtl);

                            var thisTetranId = $("[id^=aTetranIdNo_]").attr('id');
                            var thisTetranId = thisTetranId.replace( /aTetranIdNo_/, '');
                            var thisTetranId = $.trim(thisTetranId);

                            var thisSeatDesc = $(this).parent('div').parent('li').attr('class');
                            var thisSeatDesc = $.trim(thisSeatDesc);

                            var thisSeatStatus = $(this).parent('div').attr('class');
                            var thisSeatStatus = $.trim(thisSeatStatus);

                            seatReserve(thisTetranId,thisEventDtl,thisSeatDesc,thisSeatStatusStart);
                        }
                        else if(thisSeatStatusStart=="selected"){

                            $(this).removeClass();
                            $(this).addClass('available');

                            var thisSeat = $(this).parent('div').parent('li').attr('class');

                            $(this).parent('div').removeClass();
                            $(this).parent('div').addClass('available');

                            this.blur();

                            var thisEventDtl = $("[id^=aTheDtlIdNo_]").attr('id');
                            var thisEventDtl = thisEventDtl.replace( /aTheDtlIdNo_/, '');
                            var thisEventDtl = $.trim(thisEventDtl);

                            var thisTetranId = $("[id^=aTetranIdNo_]").attr('id');
                            var thisTetranId = thisTetranId.replace( /aTetranIdNo_/, '');
                            var thisTetranId = $.trim(thisTetranId);                            

                            var thisSeatDesc = $(this).parent('div').parent('li').attr('class');
                            var thisSeatDesc = $.trim(thisSeatDesc);

                            var thisSeatStatus = $(this).parent('div').attr('class');
                            var thisSeatStatus = $.trim(thisSeatStatus);

                            seatReserve(thisTetranId,thisEventDtl,thisSeatDesc,thisSeatStatusStart);

                        };

                        return false;
                    }
            );
        },
        "html"
    );

}  

以下代码是输出。根据上面的代码,每个-a标签都有一个绑定的点击功能。这工作正常,如预期的那样。现在的事情是我想在同一个-a标签上添加一个自动刷新功能,它会将参数(li类属性,即“B_seat_22 B”)发送到网站模块,然后接收适当的状态(即可用,选择,保留)。 如何根据单击功能将此自动刷新功能绑定到-a-标记?有任何想法吗?

<li class="B_seat_22 B"><div class="available"><a class="available" href="#row_22" title="22B">22B</a></div></li>
<li class="B_seat_23 B"><div class="available"><a class="available" href="#row_23" title="23B">23B</a></div></li>
<li class="B_seat_24 B"><div class="selected"><a class="selected" href="#row_24" title="24B">24B</a></div></li>
<li class="B_seat_25 B"><div class="selected"><a class="selected" href="#row_25" title="25B">25B</a></div></li>
<li class="B_seat_26 B"><div class="selected"><a class="selected" href="#row_26" title="26B">26B</a></div></li>
<li class="B_seat_27 B"><div class="reserved"><a class="reserved" href="#row_27" title="27B">27B</a></div></li>  

1 个答案:

答案 0 :(得分:0)

只是为了给你一个想法:

<div id='airplane'>
    <li class="B_seat_22 B"><div class="available"><a class="available" href="#row_22" title="22B">22B</a></div><input class='status' value='available' /></li>
    <li class="B_seat_23 B"><div class="available"><a class="available" href="#row_23" title="23B">23B</a></div><input class='status' value='available' /></li>
    <li class="B_seat_24 B"><div class="selected"><a class="selected" href="#row_24" title="24B">24B</a></div><input class='status' value='available' /></li>
    <li class="B_seat_25 B"><div class="selected"><a class="selected" href="#row_25" title="25B">25B</a></div><input class='status' value='available' /></li>
</div>

$('.status').change( function () {
    //send-info-for-this-seat-to-update
    alert('need to send info');
    updateInfo('with the new info');
});


function updateInfo(which) {
    alert(which);
}

One more thing: is B a separate class in <li class='B_seat_22 B'>?