單擊可為文本框增加價值

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));我什么也沒得到console.log(jQuery(this)); 抱歉，如果這是一個愚蠢的問題，我將開始着迷於“ 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（）文檔以獲取更多信息。

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

擴展傑姆的答案

“您的用法應該很好。您遇到的問題是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選擇元素。