英文:
Chained selectors not correct in querySelector
问题
我不明白为什么我的querySelector链是无效的。我正在将它们从jQuery转换过来，但根据我的阅读，这是完全可行的。
这是我的错误代码...
document.querySelector(":button[name='checkout'], a[href$='checkout'], form[action='/cart'], input[name='checkout']").addEventListener('click', event => {
console.log("do something")
})
它出现错误：
未捕获的DOM异常：Document.querySelector: ':button[name='checkout'], a[href$='checkout'], form[action='/cart'], input[name='checkout']' 不是一个有效的选择器
我的代码有什么问题？
英文:
I'm not understanding why my chain of querySelector is invalid. I'm converting these from jQuery, but from what I'm reading this is totally doable.
This is my incorrect code...
document.querySelector(":button[name='checkout'], a[href$='checkout'], form[action='/cart'], input[name='checkout']").addEventListener('click', event => {
console.log("do something")
})
It errors with:
> Uncaught DOMException: Document.querySelector: ':button[name='checkout'], a[href$='checkout'], form[action='/cart'], input[name='checkout']' is not a valid selector
What's wrong with my code?
答案1
得分: 2
":button 是 jQuery 选择器（链接），而不是标准的 CSS 选择器。您需要将其替换为 CSS。jQuery 文档中表示：
> 一个等效的 CSS 选择器替代 $( ":button" ) 是 $( "button, input[type='button']" )。
因此，您可以使用 button[name='checkout'], input[type='button'][name='checkout']（根据您的实际 HTML 可能可以省略其中一个）。
英文:
:button is a jQuery selector, not a standard CSS selector. You'll need to replace that with CSS. The jQuery documentation says:
> An equivalent selector to $( ":button" ) using valid CSS is $( "button, input[type='button']" ).
So you can use button[name='checkout'], input[type='button'][name='checkout'] (and probably omit one of those based on your actual HTML).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论