Question

好的，所以我试图通过使用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>

我想你可以看到我想要做的事情。我希望他们的人单击一个链接，它会更改文本字段的值和名称属性，并显然在文本框内显示新值。我想使用“this”，以便我可以在任何地方使用它而不是指定id或类。我认为我很接近，但尚未开始工作。我使用正确的jquery脚本还是应该使用不同的东西？感谢。

Answer 1

你不能在这里使用.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
依赖于这样一个非常具体的HTML结构并不总是最佳选择，因为您可能会在以后更改html的结构，而不会意识到您需要相应地更新该功能。

不知道整个页面的整体结构，我会提供这种替代方法。

<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
您可以在同一页面上拥有此类动态字段的多个实例（不确定您是否需要）
它不那么脆弱。例如，如果您愿意，可以将<ul>切换为<ol>，或者您可以将<a>个元素嵌套在几个级别，代码不必更改。

Answer 2

如果您坚持使用内联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/

Answer 3

我建议，不使用内联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);
    });
});

对于您的HTML，$(this).prev("input")将不起作用。 prev之前只获得兄弟姐妹，而不是HTML中恰好出现的元素。你需要做一点遍历来获得你想要的元素。如：

$(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);
    });
});

DEMO：http://jsfiddle.net/sLXv3/

Answer 4

为什么你需要prev（）才能成功？我有更容易的解决方案。测试下面的html：

<html>
<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $("li a").click(function(){
         var tmp=$(this).attr('id');
         $("input").attr({'name':'$name'+tmp,'value':'$value'+tmp});
    });
 });        
</script>
</head>
<body>
<label>
    <input type="text"/>
</label>
<ul>
  <li><a href="#" id="1">link1</a></li>
  <li><a href="#" id="2">link2</a></li>  
</ul>
</body>
</html>

Jquery更改prev（）输入字段

4 个答案: