Javascript 在Prestashop 1.6的默认引导主题中，响应性是如何工作的？

我试图理解在默认引导主题下响应性是如何工作的，所有关于这方面的作业都是徒劳的

情况： 让我们举一个例子，重点关注它；此主题允许在显示产品列表的两个选项之间进行选择：网格和列表。单击其中一个锚点，产品列表将从一个网格更改为另一个列表，而无需重新加载页面，地址栏中的url也不会更改

问题： 我的目标是向两个显示选项中显示的列表中添加一些数据。因此，我定制了模板文件

product list.tpl

，以打印附加属性。执行代码行。但是：

• 打印的元素仅显示在网格显示中（而不是列表）
• 当我在两种样式之间切换（从列表返回到网格）时，添加的元素不会显示

我目前的理解：

我曾经在Chrome中使用开发工具来查找事件侦听器断点。换句话说，单击带有类

large

的锚点将引导我找到绑定

$（“.large”）.onclick（）

事件的文件，并让我找到javascript执行的操作。但是在默认引导主题下，这个操作只会将我引导到

jquery-1.1.10.min.js

，这是jquery库的一个简化文件。我希望找到另一个包含使用此库的事件侦听器的文件；类似于

$（“.large”）.onclick（..）

问题： 如何找到在单击时执行页面内容更新的特定javascript代码？哪个文件保存当前主题的响应？在我所有的js文件中，我找不到任何触发动作的元素的类名（比如

large

）

根据David Taiaroa的回答进行编辑： 单击锚定后，无序列表的类别将从

网格

更改为

列表

。但这些类并没有太多的附加样式。发生的情况是

的所有内容都被更改。通常我会找到类似这样的东西：

$（'ul'）.toggleClass（“网格”）和/或一些jQuery/AJAX？
如果实际主题中存在AJAX代码，如何查找？即使在网络中，点击后也不会有GET请求，就像使用AJAX时一样。这很奇怪，这可能与引导的工作方式有关吗


解决方案：

在Prestashop 1.6的默认引导主题中包含相关javascript的文件是
global.js
。我调查了Chrome开发工具下的Sources>Event Listeners断点，这误导了我。在检查源代码中的js文件时，我同样跳过了这个文件。
没有特定的URL可供参考，我有一些一般性建议，您可以尝试一下

免责声明：）这些建议适用于典型的网页。我没有设计Prestashop模板的经验，因此在这种情况下它可能并不都适用

实现所描述的大图标/列表图标行为的一种方法是切换或添加CSS类。jQuery操纵这些类，然后CSS接管并隐藏一些对象并显示其他对象，甚至可以设置动画并更改布局

使用你们的Chrome开发工具，看看你们是否能识别出大图标类和列表图标类，或者甚至是它们的父元素发生了什么

在我所有的js文件中，我找不到任何大单词的图标

我不确定是否需要在js文件中引用图标th large。如果我读到你的帖子的方式是，如果有人点击它，那么JS就会介入并做它的事情，可能会切换或添加类

编辑

可能还会出现一些AJAX，允许您在不更改URL或重新加载页面的情况下将内容加载到页面中

希望这有帮助
 投票否决一个初学者，甚至连一句可以改善他学习方式的评论都不给！！！！1） 非常感谢，先生。你详细的回答帮助我纠正了OP中的许多错误，添加了一些信息，做了一些测试，最后提供了一个编辑。再次谢谢，你也是，先生。祝您有个美好的一天。