多重问题：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

@linong

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

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

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

---

2018.03.20 问题已得到解决