如何在JavaScript中访问锚标签？

Question

我要访问此锚标记中的JavaScript：

<a href="#" class="pull-right"> Edit </a> 

目前所在看起来像这样的HTML：我试图通过访问此锚标记

<div class="about_section"> 
    <div class="col-md-5"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <a href="#" class="pull-right"> Edit </a> 
       <h3 class="panel-title"> About You </h3> 
      </div> 
      <textarea id="about_me" class="form-control inputstl" rows="5"> </textarea> 
     </div> 
    </div> 
</div> 

现在在我的JavaScript以下路线：

$('.about_section').find('a.pull-right').eq(0).on('click', function() { 
    console.log('Works'); 
}) 

这并没有工作，也通过这条路线：

$('.about_section').find('col-md-5').find('panel panel-default').find('panel-heading').find('a').eq(0).on('click', function() { 
    //$('#edit-modal').modal() 
    console.log('Works'); 
}) 

这也没用，任何人有什么建议吗？

Answer 1

你可以简单地通过使用

document.querySelectorAll("a.pull-right"); 

你也可以像这样

$(".about_section a.pull-right").on('click',function(){ 
//rest of code 
}) 

Answer 2

试试这个

<div class="about_section"> 

<div class="col-md-5"> 

<div class="panel panel-default"> 

    <div class="panel-heading"> 

     <a href="#" class="pull-right" onclick="fun();"> Edit </a> 

     <h3 class="panel-title"> About You </h3> 

    </div> 

     <textarea id="about_me" class="form-control inputstl" rows="5"> </textarea> 

</div> 

</div> 


<script> 
    function fun() { 
     console.log("works"); 
    } 
</script> 

Answer 3

您可以使用HTML onclick事件属性触发JS做功能。例如在这种情况下。 onclick='test();'在锚标签上触发JS方法test()在页面上定义的方法。这里

<script> 
 
    function test() { 
 
    console.log('works'); 
 
    } 
 
</script> 
 

 
<div class="about_section"> 
 

 
    <div class="col-md-5"> 
 

 
    <div class="panel panel-default"> 
 

 
     <div class="panel-heading"> 
 

 
     <a href="#" class="pull-right" onclick='test();'> Edit </a> 
 

 
     <h3 class="panel-title"> About You </h3> 
 

 
     </div> 
 

 
     <textarea id="about_me" class="form-control inputstl" rows="5"></textarea> 
 

 
    </div> 
 

 
    </div> 
 

 
</div>

Answer 4

因此，许多人失踪这么多。你的第一个问题之一不是你的锚标记，而是你的选择器。 .find('col-md-5')找不到任何东西，因为您只是告诉它找到名为col-md-5的锚标签。你忘了这段时间（.）。你可以在jQuery中使用选择器，就像你在CSS中使用它们一样。

此外，你必须小心间距。即使包含句点，.find('.panel .panel-default')也不会找到任何内容，因为具有类panel的元素与具有类panel-default的类相同。这space告诉jQuery的“查找与具有panel-default类子元素类panel元素”

您的线路应该是什么样子：

$('.about_section').find('.col-md-5').find('.panel.panel-default').find('.panel-heading') 

下应该很好地工作：

$('.about_section a.pull-right').on('click', function() { 
 
\t console.log('Works'); \t 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="about_section"> 
 
\t <div class="col-md-5"> 
 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading"> 
 
\t \t \t \t <a href="#" class="pull-right"> Edit </a> 
 
\t \t \t \t <h3 class="panel-title"> About You </h3> 
 
\t \t \t </div> 
 
\t \t \t <textarea id="about_me" class="form-control inputstl" rows="5"> </textarea> 
 
\t \t </div> 
 
\t </div> 
 
</div>

然而，有几个完全回答你的问题的方法以及几种可以更好地实现的方法。

你是最初的问题标题有很多路线的答案。

1. 要获得所有锚标签在纯JavaScript：var a = document.getElementsByTagName('a')
2. 要获得所有锚标签的jQuery：
   ： var a = jQuery('a')
   • 要香草JS获得通过ID，类或名称的特定锚
   • 。 document.getElementById('ele_id_atr_val')
   • 。 document.getElementsByClassName('class-name')
   • 。 document.getElementsByName('ele_name_atr_val')
   • 请记住，使用类和名称，它将获取所有具有这些属性值的元素。
3. 要通过ID，类或名称香草jQuery的获取特定的锚：
   • 。 jQuery('#ele_id_atr_val')
   • 。 jQuery('.class-name')
   • 。 jQuery('[name=ele_name_atr_val]')
   • 请记住，使用类和名称，它将获得所有具有这些属性值的元素。

与所有的基本闪开，让我们来看看我们如何能够在你在做什么改进。您想要将一个on_click事件添加到锚点元素。首先，让我们从“动作”或href属性开始。你正在使用典型的，并且经常推荐#，但是，我认为这是一种不好的做法。有各种原因，但this answer here包装很好。我建议将你的href属性设置为href="javascript:void(0)"。这可以确保在点击锚点时不会出现任何虚假调用或意外行为。

接下来，我们来讨论一下“事件处理程序”及其更好的建立。您正在使用.eq()，这将确保该活动仅分配给一个项目，但这真的是您的意图吗？如果是这样，那么为什么所有的积累呢？为什么不给这个项目一个独特的id并根据该选择器分配事件？此外，你驾驶50英里的干草去角落附近的商店。我使用的个人规则，如果我的事件处理程序的选择器看起来像是一篇论文上的完整句子，那么它太长了。 jQuery的意义，甚至是vanilla JS'querySelector的作用就是让事情变得更简单。简化此事。

$('.about_section .pull-right').on('click', function(e) { 

这概括起来不错：

所以作为你的选择你的事件应该是简单。它提供了一个父元素about_section块，以及它正在协调我们要应用该事件的子项。现在我们有了这么多，让我们更好地讨论“dynamic event handling”。在jQuery中称为.on|.off方法。

通过使用jQuery的.on方法结合考虑“动态处理”（处理document.readyState="complete"后添加的元素，我们可以写一个更好的以及适合我们的目的，以及为那些提供可读性更强更强大的事件代表团陈述谁可能将来审查和/或编辑我们的代码。

有两种主要的方法来设置这种动态。第一个，也是最值得推荐的是，使用static（总是在页面加载时）元素并为其分配一个带有事件的子项。如：

$('.about_section').on('click', '.pull-right', function() { 
    console.log('Works'); 
}); 

在这里，我们算具有类about_section一个元素是parent元素总是可用的页面加载时。基本上，这位家长接着被告知：“嘿！嘿，你！是的，每当你有一个孩子与类pull-right，告诉那个孩子做这件事！”事实如此。无论是在页面加载时还是在页面加载后五分钟添加，具有pull-right类别的孩子将始终按照父母的说法操作。这与我以前的建议$('.about_section .pull-right')不同，它适用于这种动态（加载后加载）元素，而前一个只适用于页面加载时存在的所有元素。

第二主要方式，我的首选，但被他人认为是“危险的记忆”问题，是使用$(document).on。首先，了解它不会影响你的应用程序或其他计算机。它仅仅是不利的，因为它对运行时内存是危险的。最简单的说，大多数几天的旧的（和古老的设备）将所有内容分配给文档变量可能会降低页面的速度。这通常不再是一个问题，并且对于五年多来，我一直在使用这种方法，从基本的商业网站到高端，我为军队制作的军用应用程序。不要问，我不会说。

无论如何，我更喜欢这种方法，因为它还提供了一种简单的方法来组织整个事件列表，并且保持了动态处理的能力，这在当今的“活页”世界中经常需要。

$(document) 
    .on('click', '.about_section .pull-right', function() { 
     console.log('Works'); 
    }) 
    .on('event', 'selector', function(e) { /* Easily  */ }) 
    .on('event', 'selector', function(e) { /* Organized */ }) 
    .on('event', 'selector', function(e) { /* And  */ }) 
    .on('event', 'selector', function(e) { /* Easy */ }) 
    .on('event', 'selector', function(e) { /* To  */ }) 
    .on('event', 'selector', function(e) { /* Read */ }) 
    .on('event', 'selector', function(e) { /* For  */ }) 
    .on('event', 'selector', function(e) { /* Future */ }) 
    .on('event', 'selector', function(e) { /* Devs */ }) 

有没有问题？