多重問題：JQ 點(diǎn)擊打開與關(guān)閉事件、AJAX根據(jù)當(dāng)前點(diǎn)擊的位置獲取指定數(shù)組、數(shù)據(jù)緩存占據(jù)問題

問題描述

當(dāng)前有一個(gè)商品價(jià)格表，通過不同分類獲取當(dāng)前分類下的商品名稱、類型、數(shù)量、價(jià)格。
有一個(gè)按鈕控制分類列表的打開與關(guān)閉。但是每點(diǎn)擊一次都會(huì)重復(fù)獲取數(shù)據(jù)。
通過 $.each() 遍歷獲取之后，不同分類中的 HTML 結(jié)構(gòu)與數(shù)據(jù)重復(fù)。

• 如何控制在我點(diǎn)擊“打開”（此刻狀態(tài)為“關(guān)閉”）時(shí)，列表才獲取數(shù)據(jù)，當(dāng)再次點(diǎn)擊時(shí)（此刻狀態(tài)為“打開”）不再接收數(shù)據(jù)？
• 如何控制當(dāng)前分類下獲取的是當(dāng)前分類下的數(shù)據(jù)？

實(shí)例代碼

HTML

<td data-toggle="collapse" data-name="{$category.name}" data-target="#{$category.categoryid}" aria-expanded="false" aria-controls="collapseExample">
    打開/關(guān)閉按鈕
</td>
<tr class="collapse" id="{$category.categoryid}">
    <td colspan="5" class="ajaxProject">
        <div class="container table-responsive">
            <table class="table table-goods">
                <thead class="thead-grey">
                    <tr>
                        <th scope="col">設(shè)備</th>
                        <th scope="col">數(shù)量</th>
                        <th scope="col">總價(jià)</th>
                    </tr>
                </thead>
                <!-- /.表格標(biāo)題 -->
                <tbody>
                    <tr data-details="goodsDetails"></tr>
                    <!-- /.商品類目 -->
                </tbody>
            </table>
        </div>
    </td>
</tr>

JS

// 點(diǎn)擊“詳情”按鈕切換圖標(biāo)獲取數(shù)據(jù)
$("[data-toggle=collapse]").click(function()
{
    // 點(diǎn)擊“詳情”按鈕切換圖標(biāo)翻轉(zhuǎn)狀態(tài)
    $(this).toggleClass('iconflip');

    // AJAX 獲取數(shù)據(jù)
    var categoryName = $(this).attr('data-name');
    function getDatabase()
    {
        $.ajax({
            url: 'index.php?m=Mobile&c=Project&a=ajaxProjectTotal&id={$project.id}&name=' + categoryName,
            type: 'GET',
            success: function(data)
            {
                var html = '';
                var obj = eval ("(" + data + ")");
                console.log(obj);
                $.each(obj.result, function(idx, val)
                {
                    html += '<tr><th scope="row"><div class="row">';
                    html += '<div class="col goods-title">' + val.goods_name + '</div>';
                    // 獲取商品標(biāo)題
                    html += '<div class="w-100"></div>';
                    html += '<div class="col goods-model">' + val.typenum + '</div>';
                    // 獲取商品型號(hào)
                    html += '</div></th>';
                    html += '<td>' + val.number + '</td>';
                    // 獲取商品數(shù)量
                    html += '<td>' + val.shop_price + '</td></tr>';
                    // 獲取商品價(jià)格
                });
                
                $("[data-details=goodsDetails]").before(html);
                // 在 html 中輸出
            }
        });
    }
    getDatabase();
});

IMG

圖片一：當(dāng)點(diǎn)擊分類 1 “打開”按鈕時(shí)數(shù)據(jù)遞交至表格，點(diǎn)擊分類 2 時(shí)分類 1 的數(shù)據(jù)依然傳遞至這里。

圖片二：兩次點(diǎn)擊時(shí)的打印內(nèi)容。