Question

我正在尝试抓取“导航”div中单击的元素上的href标记无论我在导航div中点击什么元素，当前代码每次都会返回“#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);
});

Answer 1

使用.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);
});

你也应该声明你的变量。

编辑好的评论者，我只是在修改他的代码，但是现在你去了：

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

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

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

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

编辑：想更进一步吗？忘了jQuery。这是一些vanilla JS

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

Answer 2

总的来说，你应该尝试这个以获得最佳实践：

$('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'标签设置一个事件监听器。这可能会变得很沉重......想象一下，如果Google在图像页面中加载的每个图像都有一个事件监听器......你的内存已经用完了。

Answer 3

.navigation只有一个（ul）。尝试像

这样的东西

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

点击时抓取href标签

3 个答案: