0

特定のクラス (.casebox) を通過する each ループがあります。追加のクラスをチェックし、タイトルを変更し、.load() を介して特定のコンテンツをロードします。

HTML

<div id="mainbody">
 <div class="halfbox">
                    <h4 class="box casetitle"></h4>
                    <div class="caseloader loader"><img src="<?php echo $url_resources_images; ?>ajax-loader.gif" alt="Loading..." /><br /><p>Please be patient, loading cases...</p></div>
                    <div class="casebox dashbox"></div>
                </div>
                <div class="halfbox">
                    <h4 class="box casetitle"></h4>
                    <div class="caseloader loader"><img src="<?php echo $url_resources_images; ?>ajax-loader.gif" alt="Loading..." /><br /><p>Please be patient, loading cases...</p></div>
                    <div class="casebox dashbox apending"></div>
                </div>

Javascript

function loadCases(){
$(".casebox").each(function(){
    getURLs();
    boxType();
    console.log('activated');
    div = $(this).parents('div').eq(0);
    div.css('background', 'blue');

    //BOXOVERIDE - FOR WHEN THE URL CAN'T BE SET E.G. DASHBOARD
    if($(this).hasClass("allopen")){
        div.find($('.casetitle').text('All Open Cases'));
        caseGET = "&casetype=allopen";
    } else if($(this).hasClass("copen")){
        div.find($('.casetitle').text('My Created Cases (Open)'));
        caseGET = "&casetype=copen";
    } else if($(this).hasClass("aopen")){
        div.find($('.casetitle').text('My Assigned Cases (Open)'));
        caseGET = "&casetype=aopen";
    } else if($(this).hasClass("allclosed")){
        div.find($('.casetitle').text('All Closed Cases'));
        caseGET = "&casetype=allclosed";
    } else if($(this).hasClass("cclosed")){
        div.find($('.casetitle').text('My Created Cases (Closed)'));
        caseGET = "&casetype=cclosed";
    } else if($(this).hasClass("aclosed")){
        div.find($('.casetitle').text('My Assigned Cases (Closed)'));
        caseGET = "&casetype=aclosed";
    } else if($(this).hasClass("apending")){
        div.find($('.casetitle').text('My Assigned Cases (Pending Close)'));
        caseGET = "&casetype=apending";
    }
    console.log(caseGET);
    $(this).load("boxes/cases.php?boxtype=" + boxtype + caseGET + orgGET, function (){
        div.find(".caseloader").hide();
    });
});
}

ただし、すぐに実行されるようで、2 番目のループに入ると、最初の実行で行われた設定が上書きされるようです。最初の実行では .hasClass に一致する結果がなく、そのタイトルは関数 getURLS() によって設定されます。しかし、2 番目のループが通過すると、1 番目のボックスで設定された内容がオーバーライドされ、このクラスを持つのは 2 番目のボックスだけであるにもかかわらず、タイトルが「My Assigned Cases (Pending Close)」になります。これに加えて、1 番目のボックスは正しいコンテンツをロードしますが、ロード バーは消えませんが、2 番目のボックスのロード バーは消えます。

それがくっつくことを確実にする方法についてのアイデアはありますか？これはおそらくあまり明確ではありませんが、うまくいけば上記のコードから、説明に役立つでしょう。ありがとう。

4

1 に答える 1

-1

boxType、orgGet がどこから来ているのかわかりません...しかし、問題は、$('.casetitle') のようなものを宣言すると、実際にはそれらのクラスのドキュメント全体を再検索することだったと思います。

次のようなものを試してください：

function loadCases(){
    $(".casebox").each(function(){
        getURLs();
        boxType();
        console.log('activated');

        //parent halfbox - only get the first parent
        var parent = $(this).parent('.halfbox');
        parent.css('background', 'blue');

        //seems that you try to get the casetitle all the time
        //find the element with the class casetitle, which is inside the parent
        var ct = parent.find('.casetitle');

        //BOXOVERIDE - FOR WHEN THE URL CAN'T BE SET E.G. DASHBOARD

        if($(this).hasClass("allopen")){
            //change the html inside the h4
            ct.html('All Open Cases');
            caseGET = "&casetype=allopen";
        } else if($(this).hasClass("copen")){
            ct.html('My Created Cases (Open)');
            caseGET = "&casetype=copen";
        } else if($(this).hasClass("aopen")){
            ct.html('My Assigned Cases (Open)');
            caseGET = "&casetype=aopen";
        } else if($(this).hasClass("allclosed")){
            ct.html('All Closed Cases');
            caseGET = "&casetype=allclosed";
        } else if($(this).hasClass("cclosed")){
            ct.html('My Created Cases (Closed)');
            caseGET = "&casetype=cclosed";
        } else if($(this).hasClass("aclosed")){
            ct.html('My Assigned Cases (Closed)');
            caseGET = "&casetype=aclosed";
        } else if($(this).hasClass("apending")){
            ct.html('My Assigned Cases (Pending Close)');
            caseGET = "&casetype=apending";
        }
        console.log(caseGET);

        $(this).load("boxes/cases.php?boxtype=" + boxtype + caseGET + orgGET, function (){
            parent.find('.caseloader').hide();
        });
    });
};
于 2013-11-14T03:42:26.090 に答える