Question

我有一个<div class="foo">Foo</div>，我有两个输入字段：

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

我希望能够点击<div>Foo</div>，并使用值Foo填充字段＃1，使用值Bar填充字段＃2。（根据这个想法推断，结合许多不同的div，因此，许多不同的价值组合。）我如何才能使用jQuery做到最好？

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

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

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

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

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

Answer 1

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

你可以将任何属性放到你需要的任何标签上并使用$（[selector]）。attr（'attr_name'）来获取值，html5定义了一些“data-”属性来存储类似的东西{ {3}}

编辑：你可以拥有像

这样的东西

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

和js

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

然后js是通用的，您可以根据需要添加任意数量的div

Answer 2

使用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");
});
});

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

2 个答案: