Question

我有一系列简单的锚标记，我希望锚的文本出现在输入字段中。

如何使用Javascript识别单击的锚点而不是第一个锚点标记，如附加脚本中所示？总和

    <script type="text/javascript">
    function test()
    {
        var var1 = document.getElementById('add2').innerHTML;
        document.getElementById('add').value = var1;
    }
    </script>

  </HEAD>

  <BODY>
    <FORM NAME="myform">

      <INPUT TYPE="text" ID="add" NAME="result" VALUE=""/>
    </FORM>

  </BODY>
  <br>
  <br>

        <a id="add2" onclick="test()" href="#" >Test1</a>
        <br>
         <a id="add2" onclick="test()" href="#" >Test2</a>

Answer 1

您可以使用jquery执行此操作。只需将类添加到锚标记即可。

<body>
    <FORM NAME="myform">
      <INPUT TYPE="text" ID="add" NAME="result" VALUE=""/>
    </FORM>
  <br>
  <br>

        <a id="add1" class="anchor" href="javascript:void(0)" >Test1</a>
        <br>
         <a id="add2" class="anchor" href="javascript:void(0)" >Test2</a>
</body>

$(document).ready(function() {
    $(".anchor").click(function() {
        var val = $(this).text();
        $("#add").val(val);
    });
});

你可以看到它在这里工作。 https://jsfiddle.net/ctzzfqm1/

Answer 2

您应该将点击的元素对象传递给方法：

 <a id="add2" onclick="test(this)" href="#" >Test1</a>
 <a id="add2" onclick="test(this)" href="#" >Test2</a>

然后使用元素上下文来访问其文本：

function test(obj){
   document.getElementById('add').value =  obj.innerHTML;
}

Answer 3

FIDDLE

$('.a').click(function () {
    alert($(this).html());
});

您可以在锚标记上添加一个类，然后单击获取文本

Answer 4

您的代码无效，因为HTML中的ID必须是唯一的。我建议使用addEventListener而不是丑陋的内联点击处理程序绑定事件

window.onload = function() {
  var elements = document.getElementsByClassName('add2');
  for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() {
      document.getElementById('add').value = this.innerHTML;
    }, false);
  }
}

<INPUT TYPE="text" ID="add" NAME="result" VALUE="" />
<br>
<a class='add2' href="#">Test1</a>
<br>
<a class='add2' href="#">Test2</a>

参考文献：

在锚标记列表中，如何访问特定标记的文本

4 个答案: