如何在JavaScript中訪問錨標籤？

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的「查找與具有panel-default類子元素類panel元素」

您的線路應該是什麼樣子：

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

下應該很好地工作：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="about_section"> 
 
\t <div class="col-md-5"> 
 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading"> 
 
\t \t \t \t <a href="#" class="pull-right"> Edit </a> 
 
\t \t \t \t <h3 class="panel-title"> About You </h3> 
 
\t \t \t </div> 
 
\t \t \t <textarea id="about_me" class="form-control inputstl" rows="5"> </textarea> 
 
\t \t </div> 
 
\t </div> 
 
</div>

然而，有幾個完全回答你的問題的方法以及幾種可以更好地實現的方法。

你是最初的問題標題有很多路線的答案。

1. 要獲得所有錨標籤在純JavaScript：var a = document.getElementsByTagName('a')
2. 要獲得所有錨標籤的jQuery：
   ： var a = jQuery('a')
   • 要香草JS獲得通過ID，類或名稱的特定錨
   • 。 document.getElementById('ele_id_atr_val')
   • 。 document.getElementsByClassName('class-name')
   • 。 document.getElementsByName('ele_name_atr_val')
   • 請記住，使用類和名稱，它將獲取所有具有這些屬性值的元素。
3. 要通過ID，類或名稱香草jQuery的獲取特定的錨：
   • 。 jQuery('#ele_id_atr_val')
   • 。 jQuery('.class-name')
   • 。 jQuery('[name=ele_name_atr_val]')
   • 請記住，使用類和名稱，它將獲得所有具有這些屬性值的元素。

與所有的基本閃開，讓我們來看看我們如何能夠在你在做什麼改進。您想要將一個on_click事件添加到錨點元素。首先，讓我們從「動作」或href屬性開始。你正在使用典型的，並且經常推薦#，但是，我認爲這是一種不好的做法。有各種原因，但this answer here包裝很好。我建議將你的href屬性設置爲href="javascript:void(0)"。這可以確保在點擊錨點時不會出現任何虛假調用或意外行爲。

接下來，我們來討論一下「事件處理程序」及其更好的建立。您正在使用.eq()，這將確保該活動僅分配給一個項目，但這真的是您的意圖嗎？如果是這樣，那麼爲什麼所有的積累呢？爲什麼不給這個項目一個獨特的id並根據該選擇器分配事件？此外，你駕駛50英里的乾草去角落附近的商店。我使用的個人規則，如果我的事件處理程序的選擇器看起來像是一篇論文上的完整句子，那麼它太長了。 jQuery的意義，甚至是vanilla JS'querySelector的作用就是讓事情變得更簡單。簡化此事。

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

這概括起來不錯：

所以作爲你的選擇你的事件應該是簡單。它提供了一個父元素about_section塊，以及它正在協調我們要應用該事件的子項。現在我們有了這麼多，讓我們更好地討論「dynamic event handling」。在jQuery中稱爲.on|.off方法。

通過使用jQuery的.on方法結合考慮「動態處理」（處理document.readyState="complete"後添加的元素，我們可以寫一個更好的以及適合我們的目的，以及爲那些提供可讀性更強更強大的事件代表團陳述誰可能將來審查和/或編輯我們的代碼。

有兩種主要的方法來設置這種動態。第一個，也是最值得推薦的是，使用static（總是在頁面加載時）元素併爲其分配一個帶有事件的子項。如：

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

在這裏，我們算具有類about_section一個元素是parent元素總是可用的頁面加載時。基本上，這位家長接着被告知：「嘿！嘿，你！是的，每當你有一個孩子與類pull-right，告訴那個孩子做這件事！」事實如此。無論是在頁面加載時還是在頁面加載後五分鐘添加，具有pull-right類別的孩子將始終按照父母的說法操作。這與我以前的建議$('.about_section .pull-right')不同，它適用於這種動態（加載後加載）元素，而前一個只適用於頁面加載時存在的所有元素。

第二主要方式，我的首選，但被他人認爲是「危險的記憶」問題，是使用$(document).on。首先，瞭解它不會影響你的應用程序或其他計算機。它僅僅是不利的，因爲它對運行時內存是危險的。最簡單的說，大多數幾天的舊的（和古老的設備）將所有內容分配給文檔變量可能會降低頁面的速度。這通常不再是一個問題，並且對於五年多來，我一直在使用這種方法，從基本的商業網站到高端，我爲軍隊製作的軍用應用程序。不要問，我不會說。

無論如何，我更喜歡這種方法，因爲它還提供了一種簡單的方法來組織整個事件列表，並且保持了動態處理的能力，這在當今的「活頁」世界中經常需要。

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

有沒有問題？