Question

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

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));我没有得到任何结果我很抱歉，如果这是一个愚蠢的问题，我只是开始了解“这个”（或者至少我以为我是。）

Answer 1

如果在标记中引入两个外部DIV，则可以使用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() documentation了解详情。

Answer 2

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/

Answer 3

如果您只想要前一个<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>标记。）

Answer 4

您对this的使用应该没问题。您的问题是prev。 prev只获得前面的兄弟姐妹。在这种情况下，前面的兄弟是锚而不是input。因此，.prev("input")将找不到任何内容，因为上一个兄弟与选择器不匹配。

Answer 5

延长Jame的答案

“你对此的使用应该没问题。你的问题是prev。prev只能得到前面的兄弟。在这种情况下，前面的兄弟是一个锚而不是一个输入。结果，.prev（”输入“））因为前一个兄弟与选择器不匹配，所以找不到任何东西。“

.prev（）的选择器是排他性的。在这种特定情况下，您可以菊花链式prev（）来选择您想要的内容。

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

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

});

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

单击时在文本框中添加值

5 个答案: