jQuery attr（“ href”）不起作用

Question

我正在建立一個WordPress主題。 在文章的底部，我插入了一個自定義導航欄，在其中顯示標簽和分頁鏈接。 （所有wordpress元素都可以正常工作：wordpress並不是將我帶到這里的問題）

當我單擊頁碼鏈接時，我想使用javascript方法.load（）刷新帖子內容（基本上，我想瀏覽帖子的頁面，而不必每次都重新加載所有內容）

為此，我需要檢索要加載的鏈接的href屬性。 在閱讀了官方API並在幾個論壇上進行了搜索之后，我試圖通過這段代碼來實現這一目標……但是它不起作用，我也無法理解為什么。

HTML

<nav id="tag-and-navigation">
    <div class="page-numbers tags-and-navigation-elem">
        <a href="my_first_page">1</a>
        <a href="my_second_page">2</a>
    </div>
</nav>

jQuery（調試模式版本：我只是嘗試在控制台中顯示href）

$(document).ready(function(){
    $('.page-numbers.tags-and-navigation-elem').click(function(){
       console.log($(this).attr('href'));
    });
});

當我參加“ my_first_page”時，此代碼在控制台上顯示“ undefined”。 有什么線索嗎？ 謝謝

Answer 1

那是因為您正在使用沒有href屬性的$('.page-numbers.tags-and-navigation-elem')選擇div。

你可能想說

console.log($(this).find('a').attr('href'));

要么

如果要單擊anchors並獲取其hrefs使用此

$(document).ready(function(){
    $('.page-numbers.tags-and-navigation-elem a').click(function(){
       console.log($(this).attr('href'));
    });
});

Answer 2

您的jquery選擇器正在選擇div元素而不是a標簽。 因此，$（this）將是div元素。

而是將選擇器更改為此：

$('.page-numbers.tags-and-navigation-elem a')

然后它將起作用:)

Answer 3

顯然，您引用的元素不是anchor標記。

您的代碼：

$(document).ready(function(){
    $('.page-numbers.tags-and-navigation-elem').click(function(){
       console.log($(this).attr('href'));
    });
});

你可以說：

$(document).ready(function(){
    $('.page-numbers.tags-and-navigation-elem a').click(function(){
       console.log($(this).attr('href'));
    });
});