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＆＃34;查找具有类panel的元素，其子元素具有类panel-default＆＃34;

你的行应该是什么样的：

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

以下应该可以正常工作：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

＆＃13;

但是，有几种方法可以完全回答您的问题以及可以更好地实现这些问题的几种方法。

您的初始问题标题有很多答案路线。

使用纯JavaScript获取所有锚标记：var a = document.getElementsByTagName('a')
获取jQuery中的所有锚标记：var a = jQuery('a')
要通过香草JS中的ID，Class或Name获取特定锚点：
- 。 document.getElementById('ele_id_atr_val')
- 。 document.getElementsByClassName('class-name')
- 。 document.getElementsByName('ele_name_atr_val')
- 请注意，使用Class和Name，它将获得具有这些属性值的所有元素。
通过vanilla jQuery中的ID，Class或Name获取特定锚点：
- 。 jQuery('#ele_id_atr_val')
- 。 jQuery('.class-name')
- 。 jQuery('[name=ele_name_atr_val]')
- 请注意，使用Class和Name，它将获得具有这些属性值的所有元素。

将所有基础知识排除在外，让我们看看我们如何改进您正在做的事情。您想要将on_click事件添加到锚元素。首先，让我们从＆＃34;行动＆＃34;开始或href属性。您使用的是典型的，经常推荐的#，但是，我认为这是一种不好的做法。有各种各样的原因，但this answer here很好地解决了这个问题。我建议您将href属性设置为href="javascript:void(0)"。这样可以确保在单击锚点时没有错误的调用或意外行为。

接下来，让我们讨论＆＃34;事件处理程序＆＃34;以及更好的建立。您正在使用.eq()，这将确保仅将事件分配给一个项目，但这是否真的是您的意图？如果是这样，为什么所有的积累？为什么不给这个项目一个唯一的id并根据该选择器分配事件？此外，您驾车穿过50英里的干草去到附近的商店。我使用的个人规则，如果我的事件处理程序的选择器在论文中看起来像一个完整的句子，那就太长了。 jQuery，甚至是香草JS＆＃39; querySelector是为了让事情变得更轻松。简化此事。

因此，您的活动选择器应该像以下一样简单：

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

这总结得很好。它提供了一个父元素about_section块，以及我们想要应用该事件的协调子元素。现在我们已经有了这么多，让我们更好地讨论＆＃34; dynamic event handling＆＃34;。在jQuery中称为.on | .off方法。

通过使用jQuery的.on方法结合思考＆＃34;动态处理＆＃34; （处理document.readyState="complete"之后添加的元素，我们可以编写更强大的事件委托语句，更好地适合我们的目的，并为将来可能正在审查和/或编辑我们的代码的人提供更容易的可读性。

建立这种动态有两种主要方式。第一个，也是最推荐的是使用static（页面加载时始终存在）元素，并为其指定一个带有事件的子元素。如：

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

在这里，我们指望一个元素about_section成为页面加载时始终可用的parent元素。基本上，这个父母然后被告知＆＃34;嘿！嘿，你！是的，就是你！每次你有一个班级pull-right的孩子，告诉那个孩子做这件事！＆＃34;它确实如此。无论是在页面加载时添加，还是在页面加载后五分钟添加，具有类pull-right的孩子将始终按照其父母的说法进行操作。这与我先前对$('.about_section .pull-right')的建议的不同之处在于它将适用于此类动态（添加后加载）元素，而前一个元素仅适用于页面加载时存在的所有元素。

第二种主要方式，我的首选，但被认为是一种危险的记忆＆＃34;其他人的问题是使用$(document).on。首先，要理解它不会danger它会损害您的应用或其他计算机。它只是不受欢迎，因为它对运行时内存有危险。简单来说，大多数情况下，旧的（和古代设备）将所有内容分配给文档变量可能会降低页面速度。这通常不再是一个问题，五年多来我现在一直在使用这种方法，从基本的商业网站到高端，我为军队制作的机密军事应用程序。不要问，我不会告诉你。

无论如何，我更喜欢这种方法，因为它还提供了一种简单的方法来组织整个事件列表，并保持动态处理的强大功能，这在今天的＃34世界中经常需要。 ;实况页面＆＃34;。

$(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    */ })

有问题吗？

如何在JavaScript中访问锚标记？

4 个答案: