Javascript 如何将值传递给（Jade）pug 中的 onclick 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39160264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass value to a onclick function in (Jade)pug?
提问by Saras Arya
I am new to jade and stuck on this issue. I think I have tried everything from the StackOverflow posts and still at nothing.
我是 jade 的新手，一直在解决这个问题。我想我已经尝试了 StackOverflow 帖子中的所有内容，但仍然一无所获。
The things I have tried
我尝试过的事情
button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value="Read More" onclick='gotoBlog( #{val.link} )')
Error
错误
1:8 Uncaught SyntaxError: Invalid or unexpected token
Changing it to !{val.link}
将其更改为 !{val.link}
Error
错误
Uncaught SyntaxError: Unexpected token .
Changing it to "!{val.link}"and "#{val.link}"just gives me string understandably so. BTW val.link is a string
将其更改为"!{val.link}"并且"#{val.link}"只是让我可以理解字符串。顺便说一句 val.link 是一个字符串
Just giving val.link says Uncaught ReferenceError: val is not defined
只是给 val.link 说 Uncaught ReferenceError: val is not defined
I am out of options now. Help will be appreciated.
我现在别无选择。帮助将不胜感激。
Thanks
谢谢
回答by WookieCoder
When adding attributes to an html element, you are already within the scope of pug, so you can just use pug variables like regular js variables.
当给 html 元素添加属性时，你已经在 pug 的范围内，所以你可以像使用常规 js 变量一样使用 pug 变量。
button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value="Read More" onclick='gotoBlog(' + val.link + ')')
回答by Matheus Mendes
I just used the code below and it worked for me (with pre and pos quotes)
我只是使用了下面的代码，它对我有用（带有 pre 和 pos 引号）
button(type='button', onclick='someFunction("'+ yourObject.id +'")' ) PressMe
button(type='button', onclick='someFunction("'+ yourObject.id +'")' ) PressMe
回答by furt furt
Use differing nested quotation marks so that you pass a string to your gotoBlog function. Here, I use single ticks within double ticks.
使用不同的嵌套引号，以便将字符串传递给 gotoBlog 函数。在这里，我在双刻度内使用单刻度。
button(type='button' class=' c-btn-blue c-btn-circle c-btn-uppercase' value="Read More" onclick="gotoBlog( '#{val.link}' )")
In other words:
换句话说：
button( onclick= "myFunction('#{stringVariable}')" )
回答by Raf
I came across a similar issues and solved it rather differently (by escaping params).
In my case, I needed to pass the following template valuesto a javascript function as argument when a button is clicked
我遇到了类似的问题，并以不同的方式解决了它（通过转义参数）。就我而言，template values当单击按钮时，我需要将以下内容作为参数传递给 javascript 函数
{
url:"http://google.com",
token: "Bearer your-token",
accountId: "abc123"
}
So the pugin my case looked as follow
所以pug在我的情况下看起来如下
button(onclick='authenticate(\'' + url + '\',\'' + token + '\',\'' + accountId + '\')') Login
And the resulting html is as follow
生成的 html 如下
<button onclick="authenticate('http://google.com','Bearer your-token','abc123')">Login</button>
回答by kilogic
When using multiple parameters in a function, this did the trick:
在一个函数中使用多个参数时，这样做的技巧：
'myFunction(' + '"' + varA + '"' + ',' + '"' + varB + '"' + ')'
'myFunction(' + '"' + varA + '"' + ',' + '"' + varB + '"' + ')'
NOTE: outer/inner/all quote marks can be '(single) or "(double) quote marks, I used single and double quote marks for readability.
注意：外部/内部/所有引号可以是'（单）或"（双）引号，我使用单引号和双引号来提高可读性。
回答by Oscar Luza
You just need to put onclick="myfunction(#{varible.atributo})"
你只需要把 onclick="myfunction(#{varible.atributo})"
Here a example:
这里有一个例子：
table
thead
tr
th #ID
th Description
th Actions
tbody
each item, i in itemlist
tr
th(scope='row') #{item.id}
td #{item.description}
td
button(onclick="editItem(#{item.id})", title="Edit")
| Edit
回答by Max Tromp
button(type='button', onClick='function(\'' + someValue + '\')') Text
button(type='button', onClick='function(\'' + someValue + '\')') 文本
This worked for me to use values that I passed to pug inside an onClick function.
这对我有用，可以使用我在 onClick 函数中传递给 pug 的值。
