jQuery - 通过单击一个div自动填充两个输入字段

I have a <div class="foo">Foo</div> and I have two input fields:

我有一个

Foo ，我有两个输入字段：

<input type="submit" class="text_field" name="input_one" value=""> and
and
<input type="submit" class="text_field" name="input_two" value="">

I would like to be able to click <div>Foo</div> and populate field #1 with the value Foo and field #2 with value Bar. (Extrapolate upon this idea to incorporate many different divs and thus, many different value combinations.) How best can I do this using jQuery?

我希望能够单击

Foo 并使用值Foo填充字段＃1，使用值Bar填充字段＃2。（根据这个想法推断，结合许多不同的div，因此，许多不同的值组合。）如何使用jQuery做到最好？

So far I have no trouble doing something like:

到目前为止，我可以毫不费力地做一些事情：

jQuery(function () {
$('div.foo').click(function (e) {

    var foo = $(this).text();

    $("input.text_field").val(foo);
});
});

This works for clicking the div and populating one text field with the text value between the tags, i.e., "Foo". This is a good start and all...but since I am new to this, I was wondering how might I best go about populating the two different text fields with two different said values "Foo" and "Bar". Is there a way to set a name="Bar" or something to this effect on the div, and then access that name value to insert into the second text field input_two? Thoughts, comments, considerations appreciated, thank you!

这适用于单击div并使用标记之间的文本值填充一个文本字段，即“Foo”。这是一个良好的开端，所有......但由于我是新手，我想知道如何最好地用两个不同的值“Foo”和“Bar”来填充两个不同的文本字段。有没有办法在div上设置name =“Bar”或其他类似的东西，然后访问该名称值以插入第二个文本字段input_two？思考，评论，考虑因素表示赞赏，谢谢！

2 个解决方案

#1

it's a weird question, can you explain what you NEED to do? I mean, you posted what you want to do, but why do you want to do that? it's not clear what are Bar and Foo, are those predefined values for each submit? does the value depend on the div (let's say you have more than one div and you need to populate the inputs depending on which div was clicked)

这是一个奇怪的问题，你能解释一下你需要做什么吗？我的意思是，你发布了你想做的事情，但你为什么要这样做呢？目前尚不清楚Bar和Foo是什么，每个提交的预定义值是什么？该值是否取决于div（假设你有多个div，你需要根据点击的div填充输入）

you can put any attribute to any tag that you need and access them using $([selector]).attr('attr_name') to get the value, html5 defines some "data-" attributes to store thing like that http://html5doctor.com/html5-custom-data-attributes/

你可以将任何属性放到你需要的任何标签上，并使用$（[selector]）。attr（'attr_name'）来获取值，html5定义一些“data-”属性来存储像http：//这样的东西html5doctor.com/html5-custom-data-attributes/

EDIT: you can have something like

编辑：你可以有类似的东西

<div class='clickeable' data-input1='foo' data-input2='bar'></div>
<div class='clickeable' data-input1='baz' data-input2='xxx'></div>

and the js

和js

$('.clickeable').click(function(){
  obj = $(this);
  $('input[name=input_1]').val(obj.attr('data-input1'));
  $('input[name=input_2]').val(obj.attr('data-input2'));
})

then the js is generic and you can add as many divs as you want whit any values

然后js是通用的，你可以添加任意数量的div，你想要任何值

#2

Use Id selector: http://api.jquery.com/id-selector/

使用Id选择器：http：//api.jquery.com/id-selector/

<div class="foo">

    <input type="submit" id="one" class="text_field" name="input_one" value=""> 
    <input type="submit" id="two" class="text_field" name="input_two" value="">
</div> 


jQuery(function () {
$('div.foo').click(function (e) {    
    var foo = $(this).text();    
    $("#one").val(foo);
    $("#two").val("Bar");
});
});

#1