0

私は Javascript を初めて使用し、Javascript の友人数人に尋ねましたが、答えがないようです。私はPHPで単純な検索クエリを開発しており、たとえば次のようないくつかの結果を出力します:

<a href="#" onclick="injectForm(this);">Result Text Here</a>
<a href="#" onclick="injectForm(this);">Result Text 2 Here</a>
<a href="#" onclick="injectForm(this);">Result Text 3 Here</a>


<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input type="text" name="textfield" id="textfield" />Search
</form>

injectForm() の疑似コード;

  • クリックしたばかりのリンクの .value を取得します
  • それを変数に渡します。つまり、result = (something something).value
  • form1.textfield.value = 結果を設定

私がやりたいのは、結果の値「Anchor Text Here」を読み取る単純な injectForm() 関数を用意することです。誰かがそれをクリックすると、値「Result Text Here」が「textfield」にドロップされます。フォーム。これは DOM でできると思います。Jquery などの JS ライブラリは使用したくありません。

誰にもアイデアがありますか？各 href に異なる DIV または SPAN タグを使用した場合、DOM を使用できます。可能であれば、各結果に異なる div またはクラスで番号を付ける必要はありません。相対的な this(); を読み取るだけです。みたいな。

4

1 に答える 1

1

とてもシンプル

document.getElementById("injectDiv").addEventListener("click", function(e) {
  tgt = e.target;
  if (tgt.classList.contains("inject")) {
    e.preventDefault(); // cancel link
    document.getElementById("textfield").value = tgt.innerHTML;
  }
})
<div id="injectDiv">
  <a href="#" class="inject">Result Text 1 Here</a><br/>
  <a href="#" class="inject">Result Text 2 Here</a><br/>
  <a href="#" class="inject">Result Text 3 Here</a><br/></div>
<input type="text" id="textfield" />

古いインライン バージョン

function injectForm(theLink) {
  document.getElementById("textfield").value = theLink.innerHTML;
  return false; // cancel the click
}
<a href="#" onclick="return injectForm(this);">Result Text 1 Here</a><br/>
<a href="#" onclick="return injectForm(this);">Result Text 2 Here</a><br/>
<a href="#" onclick="return injectForm(this);">Result Text 3 Here</a>
<br/>
<input type="text" id="textfield" />

于 2013-05-20T15:45:19.720 に答える