前端数据循环的列表,每个列表有三个标签按钮。怎么样让每组的按钮样式互不影响,目前是排他思想,会影响到其他组按钮的样式。

需要实现点击火锅类的按钮,只影响火锅类的高亮显示,不影响别的列表的高亮。
目前的情况是,点击火锅按钮的高亮后,其他列表的按钮高亮也取消了。
前端数据循环的列表,每个列表有三个标签按钮。怎么样让每组的按钮样式互不影响,目前是排他思想,会影响到其他组按钮的样式。

请教一下思路。


回答:

大概理解了,其实需要分组排他,然后现在做的是全局排他。
因为循环的是数组是有索引的,举例数据为[{type:’火锅’},{type:’自助餐’}]
具体怎么处理看业务中怎么要求,提供二个思路,其实本质就是区分开来。
1.给不同组的三个按钮,根据数据索引,设置同一个类名:类名+索引,每次进行操作的时候就可以通过类名找到这一组的三个按钮,进行样式移除,当前操作按钮的样式添加的操作。
2.如果选择值还需要用的话,设置全局的一个数组对象let selectArr = [],拿取对比都通过索引这样。


回答:

取循环的索引作为唯一变量动态加class类


回答:

看到采纳答案之前想到思路了。也是根据数组的索引。每个列表的索引是唯一的。把取到的索引遍历到新建的变量里面navIndex=[{index:i,tab:0}](tab是推荐,附近,热卖key)。匹配的时候就可以单独控制每列的按钮样式了:class="{active:navIndex[index].index==index&&navIndex[index].tab==0}"

以上是 前端数据循环的列表,每个列表有三个标签按钮。怎么样让每组的按钮样式互不影响,目前是排他思想,会影响到其他组按钮的样式。 的全部内容, 来源链接: utcz.com/p/936921.html

回到顶部