Jquery更改prev()输入字段
好的，我正在尝试使用jquery的prev()函数来更改输入字段的值。我有一个文本字段，后面有一些链接。当有人点击链接时，我想让它更改以前的
<label>
<input type="text"/>
</label>
<ul>
<li onclick="field('name1','value1');"><a href="#">link1</a></li>
<li onclick="field('name2','value2');"><a href="#">link2</a></li>
</ul>
<script type="text/javascript">
function field($name,$value){
$(this).prev("input").attr('name','$name');
$(this).prev("input").attr('value','$value');
}
</script>我想你可以看到我在做什么。我想让他们点击一个链接，它会改变文本字段的value和name属性，并在文本框中显示新值。我想使用" this“，这样我就可以在任何地方使用它，而不是指定id或类。我想我已经很接近了，但是还没有开始工作。我使用的是正确的jquery脚本，还是应该使用不同的脚本？谢谢。
回答 4
Stack Overflow用户
发布于 2012-01-06 03:52:03
这里不能使用.prev()，因为输入不是“紧跟其后的兄弟”(see the docs)
如果你真的想走这条路，你必须这样做……
<label>
<input type="text"/>
</label>
<ul>
<li onclick="field(this,'name1','value1');"><a href="#">link1</a></li>
<li onclick="field(this,'name2','value2');"><a href="#">link2</a></li>
</ul>
<script>
function field(el, $name,$value){
$(el).closest("ul").prev("label").find("input").attr({
name : $name,
value : $value
});
}
</script>有几件事我不喜欢……
在一个非常特定的结构上使用内联
- 并不总是最好的选择，因为您可能在以后更改了Javascript
- Relying的结构，而没有意识到需要相应地更新函数。
如果不知道整个页面的整体结构，我会提供另一种方法。
<div class='dynamic-field'>
<label><input type="text" /></label>
<ul>
<li><a href="#" data-name="name1" data-value="value1">link1</a></li>
<li><a href="#" data-name="name2" data-value="value2">link1</a></li>
</ul>
</div>
<script>
$(".dynamic-field a").click(function(e) {
e.preventDefault();
var link = $(this);
link.closest(".dynamic-field")
.find("input")
.attr("name", link.data("name"))
.val(link.data("value"));
});
</script>这有几个好处
没有使用内联javascript
- You的
- 可以在同一个页面上有几个这种动态字段的实例(不确定你是否需要它)
- 它的脆弱性要小得多。例如，如果您愿意，可以将
<ul>切换为<ol>...或者，您可以将<a>元素嵌套到多个级别，而无需更改代码。
Stack Overflow用户
发布于 2012-01-06 03:57:36
如果您坚持使用内联JavaScript，则必须显式传递this：
<label>
<input type="text"/>
</label>
<ul>
<li onclick="field(this,'name1','value1');"><a href="#">link1</a></li>
<li onclick="field(this,'name2','value2');"><a href="#">link2</a></li>
</ul>然后使用jQuery DOM遍历，因为.prev只查找同级：
function field(el, $name, $value) {
$(el).closest("ul").prev("label").find("input").attr('name', $name).val($value);
}http://jsfiddle.net/mblase75/JbpYn/
也就是说，这里有一种更"jQuery“的方法来做同样的事情，避免内联JavaScript：
HTML：
<label>
<input id="ip" type="text"/>
</label>
<ul id="clickme">
<li><a href="#" data-name="name1" data-val="value1">link1</a></li>
<li><a href="#" data-name="name2" data-val="value2">link2</a></li>
</ul>JS：
$('#clickme').on('click', 'a', function(e) { // requires jQuery 1.7+
var name = $(this).data('name');
var val = $(this).data('val');
$('#ip').attr('name', name).val(val);
});http://jsfiddle.net/mblase75/JbpYn/8/
Stack Overflow用户
发布于 2012-01-06 04:04:24
我建议不要使用内联JavaScript，而是使用jQuery来绑定事件。它更容易调试，并且this将是正确的元素(而不是window)。至于参数，您可以使用data属性来保存它们。
示例：
<ul>
<li class="toggleInput" data-name="name1" data-value="value1" ><a href="#">link1</a></li>
<li class="toggleInput" data-name="name2" data-value="value2"><a href="#">link2</a></li>
</ul>然后使用jQuery：
$(function(){
$('li.toggleInput').click(function(){
var name = $(this).data('name'),
value = $(this).data('value');
$(this).prev("input").attr('name', name);
$(this).prev("input").attr('value', value);
});
});在超文本标记语言的情况下，$(this).prev("input")将无法工作。prev只获取之前的同级元素，而不是恰好在它之前的元素。你将不得不做一些遍历来得到你想要的元素。例如：
$(this).closest("ul").prev("label").find("input")如果你改变了HTML，它可能会崩溃。我建议在输入中添加一个ID (或类)，这样您就可以快速找到它。
<label>
<input type="text" id="myInput" />
</label>所以，现在你可以这样做：
$(function(){
$('li.toggleInput').click(function(){
var name = $(this).data('name'),
value = $(this).data('value');
$('#myInput').attr('name', name).val(value);
});
});演示：http://jsfiddle.net/sLXv3/
https://stackoverflow.com/questions/8748719
复制相似问题
腾讯云开发者
