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>

Jクエリ

 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

マークアップに2 つの outer を導入すると、次のように jQuery 関数DIVを使用できます。.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 に答える
0

の使用はthis問題ないはずです。あなたの問題はprevです。 prev前の兄弟のみを取得します。この場合、前の兄弟はアンカーであり、 ではありませんinput。その結果、.prev("input")前の兄弟がセレクターと一致しないため、何も見つかりません。

于 2013-11-05T21:10:41.303 に答える
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 に答える