0

我试图在单击作为其兄弟的按钮时将地址插入输入字段。

HTML

 <label for="to">To:</label>
 <input type="text" id="to" name="to" required="required" placeholder="An address" size="30" />
 <a id="to-link" href="#" class="button">Get my position</a>
 <a id="to-home" href="#" class="button">Home</a>

 <label for="from">From:</label>
 <input type="text" id="from" name="from" required="required" placeholder="Another address" size="30" />
 <a id="from-link" href="#" class="button">Get my position</a>
 <a id="from-home" href="#" class="button">Home</a>

jQuery

 jQuery("#from-home, #to-home").click(function(event) {
      event.preventDefault();

      jQuery(this).prev("input").val("123 my street, 12345 Gotham");

    });

我不知道我做错了什么，但如果我没有得到任何东西console.log(jQuery(this));对不起，如果这是一个愚蠢的问题，我刚刚开始思考“这个”（或者至少我认为我是。）

4

5 回答 5

1

如果您DIV在标记中引入两个外部 s，那么您可以使用 jQuery.prevAll()函数，如下所示：

标记：

<div>
    <label for="to">To:</label>
    <input type="text" id="to" name="to" required="required" placeholder="An address" size="30" /> <a id="to-link" href="#" class="button">Get my position</a>
    <a id="to-home" href="#" class="button">Home</a>
</div>
<div>
    <label for="from">From:</label>
    <input type="text" id="from" name="from" required="required" placeholder="Another address" size="30" /> <a id="from-link" href="#" class="button">Get my position</a>
    <a id="from-home" href="#" class="button">Home</a>
</div>

JavaScript：

jQuery("#from-home, #to-home").click(function (event) {
    event.preventDefault();

    jQuery(this).prevAll("input").val("123 my street, 12345 Gotham");
});

看看这个jsFiddle。

阅读jQuery .prevAll() 文档以获取更多信息。

于 2013-11-05T21:20:11.140 回答
1

prev() 查找上一个项目而不是以前的项目。由于您的上一项$(this)是<a>，它不会设置您的输入字段。在这种情况下，您可以执行以下任一操作：

$(this).prev().prev("input").val("123 my street, 12345 Gotham");

我不推荐。更好的方法是为您的地址组添加包装器：

<div>
  <label for="to">To:</label>
  <input type="text" id="to" name="to" required="required" placeholder="An address" size="30" /> <a id="to-link" href="#" class="button">Get my position</a>
  <a id="to-home" href="#" class="button">Home</a>

</div>
<div>
  <label for="from">From:</label>
  <input type="text" id="from" name="from" required="required" placeholder="Another address" size="30" /> <a id="from-link" href="#" class="button">Get my position</a>
  <a id="from-home" href="#" class="button">Home</a>
</div>

并为您的 javascript：

$("#from-home, #to-home").click(function (event) {
  event.preventDefault();
  $(this).siblings("input").val("123 my street, 12345 Gotham");
});

在这里您可以看到工作示例：http: //jsfiddle.net/436qA/

于 2013-11-05T21:22:16.373 回答
1

如果你只想要一个 previous <input>，你可以使用 .prevAll() 命令：

$("#from-home, #to-home").click(function(event) {
    event.preventDefault();

    $(this).prevAll("input").eq(0).val("123 my street, 12345 Gotham");
});

减少您正在寻找的.eq(0)匹配元素（因此，第二个主页按钮只会找到<input>它之前的标签）。

于 2013-11-05T21:23:18.693 回答
0

延伸詹姆斯的答案

“您对此的使用应该没问题。您的问题是 prev。prev 只获取前面的兄弟。在这种情况下，前面的兄弟是锚点而不是输入。因此， .prev("input") 不会找到任何东西，因为前一个兄弟与选择器不匹配。”

.prev() 的选择器是排他性的。在这种特定情况下，您可以菊花链 prev() 选择您想要的。

jQuery("#from-home, #to-home").click(function(event) {
  event.preventDefault();

  jQuery(this).prev().prev().val("123 my street, 12345 Gotham");

});

将允许您选择所需的内容。然而，对我来说更有意义的是按 id 选择元素。

于 2013-11-05T21:16:36.657 回答
0

你的使用this应该没问题。您的问题与prev. prev只获取前面的兄弟。在这种情况下，前面的兄弟是锚点而不是input. 结果，.prev("input")将找不到任何东西，因为前一个兄弟与选择器不匹配。

于 2013-11-05T21:10:41.303 回答