多重问题：JQ 点击打开与关闭事件、AJAX根据当前点击的位置获取指定数组、数据缓存占据问题

Question

问题描述

当前有一个商品价格表，通过不同分类获取当前分类下的商品名称、类型、数量、价格。
有一个按钮控制分类列表的打开与关闭。但是每点击一次都会重复获取数据。
通过 $.each() 遍历获取之后，不同分类中的 HTML 结构与数据重复。

• 如何控制在我点击“打开”（此刻状态为“关闭”）时，列表才获取数据，当再次点击时（此刻状态为“打开”）不再接收数据？
• 如何控制当前分类下获取的是当前分类下的数据？

实例代码

HTML

<td data-toggle="collapse" data-name="{$category.name}" data-target="#{$category.categoryid}" aria-expanded="false" aria-controls="collapseExample">
    打开/关闭按钮
</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">设备</th>
                        <th scope="col">数量</th>
                        <th scope="col">总价</th>
                    </tr>
                </thead>
                <!-- /.表格标题 -->
                <tbody>
                    <tr data-details="goodsDetails"></tr>
                    <!-- /.商品类目 -->
                </tbody>
            </table>
        </div>
    </td>
</tr>

JS

// 点击“详情”按钮切换图标获取数据
$("[data-toggle=collapse]").click(function()
{
    // 点击“详情”按钮切换图标翻转状态
    $(this).toggleClass('iconflip');

    // AJAX 获取数据
    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>';
                    // 获取商品标题
                    html += '<div class="w-100"></div>';
                    html += '<div class="col goods-model">' + val.typenum + '</div>';
                    // 获取商品型号
                    html += '</div></th>';
                    html += '<td>' + val.number + '</td>';
                    // 获取商品数量
                    html += '<td>' + val.shop_price + '</td></tr>';
                    // 获取商品价格
                });
                
                $("[data-details=goodsDetails]").before(html);
                // 在 html 中输出
            }
        });
    }
    getDatabase();
});

IMG

图片一：当点击分类 1 “打开”按钮时数据递交至表格，点击分类 2 时分类 1 的数据依然传递至这里。

图片二：两次点击时的打印内容。

Answer 1

$(this).toggleClass('iconflip');
你这个里不是有个iconflip吗？判断有这个class就不请求了

$("[data-details=goodsDetails]").before(html);
然后你说的那个分类，还是因为你的选择器没有限定分类。比如通过this获取到分类，然后parent在去find

---

http://jquery.cuishifeng.cn/h...
http://jquery.cuishifeng.cn/p...
http://jquery.cuishifeng.cn/f...

Answer 2

@linong

经过尝试后发现如果使用 hasClass() 来做判断其实也还是会重复调用。因为当 class="iconflip" 每次被切换时， hasClass() 会执行一次。

var iconFlip = $(this).attr('class');
    if ( iconFlip == 'iconflip' )
    {
        // 执行代码
    }

尝试后发现这个方法不会产生冗余和重复。

---

2018.03.20 问题已得到解决