JavaScript Isotope结合PHP动态输出商品时data-filter筛选失效求助

问题排查结果 #

问题出在PHP渲染商品元素的语法错误：你没有把数据库取出的item_brand字段值放到grid-item元素的class属性内，而是直接写在了class属性外面，导致item_brand的值变成了元素的独立无值属性，Isotope无法根据类名匹配筛选。

你当前的错误代码渲染后的元素结构如下（以item_brand值为samsung举例）：

<div class="grid-item border border-warning " samsung >

这里samsung不属于元素类名，所以.samsung的筛选条件找不到对应元素，而全选规则*匹配所有元素，所以只有全选功能正常。

修复方法 #

修改PHP中grid-item元素的输出代码，把item_brand的输出放到class属性内部：

<!-- 修改前 -->
<div  class="grid-item border border-warning " <?php echo " {$row['item_brand']}";   ?> >

<!-- 修改后 -->
<div class="grid-item border border-warning <?php echo $row['item_brand']; ?>" >

修改后渲染的元素结构为：

<div class="grid-item border border-warning samsung" >

Isotope就能正常匹配类名完成筛选。

其他注意事项 #

• 保证数据库item_brand字段的取值和按钮data-filter中的类名完全一致，类名匹配大小写敏感。
• 可以把Isotope初始化代码放到$(document).ready()回调中，确保DOM完全加载后再初始化，避免漏识别商品元素。
• 打开浏览器开发者工具查看元素属性，可以快速定位这类渲染错误。

内容的提问来源于stack exchange，提问作者Saher Ikram