点击时抓取href标签

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.这是一些香草JS

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