点击时抓取href标记

grabbing href tag on click

本文关键字：href 标记 抓取      更新时间：2023-09-26

我正在尝试获取在"navigation"div中单击的元素上的href标记无论我在导航分区中点击哪个元素，当前代码每次都会返回"#BiblesandCommentaries"。

html

<div class="navigation">
        <ul>
          <li><a href="#BiblesandCommentaries">الانجيل-تعليقات</a> </li>
          <li><a href="#EnquirersLibrary">الاستفسارات</a> </li>
          <li><a href="#NewBelievers">مؤمنون جدد</a> </li>
          <li><a href="#ChristianLiving">حياة المسيحى</a> </li>
          <li><a href="#FamilyLibrary">مكتبة الأسرة</a> </li>
          <li><a href="#YoungAdultLibrary">مكتبة الشباب</a> </li>
          <li><a href="#WorshipLibrary">مزامير وتراتيل</a> </li>
          <li><a href="#BibleTeachings">التدريس</a> </li>
          <li><a href="#Leadership">القيادة</a> </li>
          <li><a href="#SchoolofChrist">مدرسة الإنجيل</a> </li>
          <li><a href="#Dota">شاگرد سازی بصورت شنیدن</a></li>
          <li><a href="#MinorityLanguages">فهم المسيح</a> </li>
        </ul>
    </div>

js

$('.navigation').click(function() {
    test = $(this).find('a').attr('href');
    alert (test);
});

使用这样的.find().attr()总是会得到第一个，您需要更改click函数的选择器，以针对a，如下所示：

$('.navigation a').click(function(e) {
    e.preventDefault(); //use this if you don't want to reload the page
    var test = $(this).attr('href');
    alert (test);
});

您还应该声明您的变量。

EDIT好的评论，我只是在修复他的代码，但你来了：

$('.navigation a').on("click",function(){
       alert($(this).attr('href'));
});

编辑哈哈评论，让我们变得迂腐：

$("div.navigation").on("click", "a", function(e) {
    e.preventDefault();
    alert ($(this).attr('href'));
});​​​​

在不阻止标签的默认操作的情况下，您将重新加载页面

编辑：想更进一步吗？忘记jQuery。这是一些香草JS

document.querySelector("div.navigation").onclick = function(e){
    if(e.target.href){
        e.preventDefault();
        alert(e.target.href);
    }
}

总的来说，您应该尝试以下最佳实践：

$('div.navigation').on("click", "a", function() {
    alert($(this).attr('href'));
});

请记住，除非必须为同一元素多次解析DOM，否则尽量不要在内存中设置变量。此外，还要尽可能多地尝试为jQuery选择器提供深度，从而减少要解析的DOM。如果这没有道理，就这样想吧。如果它必须只解析类"navigation"的div标记，那么它应该删除所有其他标记，并且比解析类属性的每个标记花费的时间要短得多。

或者你可以关注事件：

$('div.navigation').on("click", function(event) {
    if(event.target.href){ alert(event.target.href); }
});

这样做的原因也是为了记忆。如果您只关注包装器，那么内存中只有一个事件侦听器。如果在"a"标记本身上有事件侦听器，则必须在内存中为包装器中的每个"a"标签都有一个事件侦听器。这可能会变得很重。。。想象一下，如果谷歌在图片页面中加载的每个图片上都有一个事件监听器。。。你的记忆力会耗尽的。

.navigation只有一个（ul）。试试之类的东西

$('.navigation a').click(function() {
    var test = $(this).attr('href');
    alert (test);
});
相关文章：