通过单击按钮将参数传递给 jquery 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8442552/
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
Passing parameters to a jquery function from a button click
提问by Steve Harwood
I'm a complete novice - sorry!
我是一个完整的新手 - 对不起！
I have to be able to change the colour of text via three buttons (red, blue and black)
我必须能够通过三个按钮（红色、蓝色和黑色）更改文本的颜色
The function I have, which works fine is as follows:
我拥有的功能正常，如下所示：
function btn_click() {
$("#col1 p").css("color", "#00f");
}
I need to pass two variables to this function, the specific tag (e.g. col1 p) and the hex value from the following function call:
我需要将两个变量传递给这个函数，特定标签（例如 col1 p）和来自以下函数调用的十六进制值：
<input type="image" value="" class="but-blue" onclick="btn_click();" />
Can anyone help? Many thanks in advance. Steve
任何人都可以帮忙吗？提前谢谢了。史蒂夫
回答by Samich
Change script to:
将脚本更改为：
function btn_click(selector, color) {
$(selector).css("color", color);
}
And inline handler to:
和内联处理程序：
<input type="image" value="" class="but-blue" onclick="btn_click('#col1 p','#00F');" />
update
更新
But with jQuery you can do following:
但是使用 jQuery，您可以执行以下操作：
<input type="image" value="" class="but-blue" data-selector="#col1 p" data-color="#00F" />
and jQuery script itself:
和 jQuery 脚本本身：
$(document).ready(function(){
$('input[type=image]').click(function() {
var selector = $(this).data('selector');
var color = $(this).data('color');
$(selector).css("color", color);
});
});
回答by Willem Mulder
If you want to go full-JQuery, do the Following
如果您想使用完整的 JQuery，请执行以下操作
function btn_click(selector, color) {
$(selector).css("color", color);
}
$("input").bind("click", function(event) {
btn_click($(this).attr("goal-selector"), $(this).attr("goal-color"));
});
And then in your HTML
然后在你的 HTML 中
<input type="image" value="" class="but-blue" goal-selector="#col1 p" goal-color="#00f" />
Good luck :)
祝你好运 ：）
回答by Serge
Aren't this be better:
这不是更好吗：
<input type="button" value="#00F" class="button-color" />
<input type="button" value="#0FF" class="button-color" />
<input type="button" value="#FFF" class="button-color" />
<div id="you_need_to_change"></div>
<script type="text/javascript">
$('.button-color').click(function(){$('#you_need_to_change").css("color", $(this).val())});
</script>
回答by Willem
something like this? :
像这样的东西？：
function btn_click(selector, color) {
$(selector).css("color", color);
}
and the onclick function would be:
并且 onclick 函数将是：
<input type="image" value="" class="but-blue" onclick="btn_click('#col1 p','#00f');" />
回答by Wazy
Simple as this
就这么简单
function btn_click(selector, color) {
$(this).css(selector, color);
}
<input type="image" value="" class="but-blue" onclick="btn_click('color','#00f');" />
回答by Ankur Verma
$("#redColorBtn").click(function(){
$("#urTextFiled").css("color", "#f00");
});
$("#greenColorBtn").click(function(){
$("#urTextFiled").css("color", "#0f0");
});
$("#blueColorBtn").click(function(){
$("#urTextFiled").css("color", "#00f");
});
#in jquery is used to catch an element on the basis of id value so all #related things should be the id of elements.
#在 jquery 中用于根据 id 值捕获元素，因此所有#相关的事情都应该是元素的 id。
