javascript - 在shopify中使用javascript唯一标识按钮
问题描述
有没有办法用javascript识别shopify网站上的搜索按钮?
我看过各种商店,找不到这些按钮的共同点。是否有某种 api,所以我可以识别这些按钮以添加事件。
这两个按钮都是搜索按钮,但来自不同的商店:
<button class="search-header__submit search__submit btn--link site-header__icon" type="submit">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"></path></svg>
<span class="icon__fallback-text">Submit</span>
<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"></path></svg>
<span class="icon__fallback-text">Search</span>
</button>
解决方案
由于主题的这一部分可以完全自定义,因此不太可能找到适用于所有情况的选项。但最有可能的是,搜索按钮将放置在action
等于 的表单中/search
。因此,基于此,您可以尝试使用以下选择器:
提交时:
form[action^='/search']
点击:
form[action^=/search] button
form[action^=/search] input[type='submit']
推荐阅读
- testing - 测试更新用户配置文件数据
- sql - GROUP BY 查询后选择多个最大值
- c# - 实体框架从 MySQL 迁移到 SQL Server 并且表名缺少“dbo”
- javascript - 做出反应。聊天工具 API。MessageList 组件错误 - 呈现来自其他房间的消息。组件生命周期和状态
- javascript - 循环中的Javascript条件
- go - 通过字符在字符串中的位置获取字符
- javascript - Pagespeed 评分低 - 我错过了什么?
- spring - 如何在 JAXRSClientFactoryBean 或 JAXRSClientFactory 中添加标头
- python - 马氏距离在 Pytorch 中返回 NaN
- visual-studio-code - 为 vscode 扩展的用户添加任务到 tasks.json