如何從 getElementsByClassName 獲取具有特定 ID 的元素？

Question

編輯：已解決。 感謝大家！

我是編程新手：D 我的代碼如下。 這是交易：我有多個按鈕，但我想讓它在任何時候點擊這些按鈕中的任何一個時都會發生同樣的事情，但每個按鈕也有一個特定的值，我也希望這個特定的值是打印出來。 我的代碼遍歷文檔並查看所有帶有“editButton”class 的元素，並正確識別所有按鈕，但問題是無論我按下哪個按鈕，我總是得到最后一個按鈕的值，因為 var id僅在 for 循環完成后分配，並且位於最后一個元素上。 我嘗試創建一個全局變量並為其賦值，但結果是一樣的。 在繼續 to.done (function (data) 之前，我嘗試結束 for 循環，但出現錯誤。有人可以幫我嗎？謝謝！

 $(document).ready(function() { var anchors = document.getElementsByClassName('editButton'); for (var i = 0; i < anchors.length; i++) { var anchor = anchors[i]; anchor.onclick = function() { $.ajax({ method: "GET", url: "/testedit.php", }).done(function(data) { var id = anchor.value; /* from result create a string of data and append to the div */ var result = data; var string = '<p>ID is ' + id + '</p><br>'; $("#records").html(string); }); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="records"></div>

Answer 1

實際上，與其做一個巨大的 for 循環來將onclick事件添加到您的按鈕，最好的方法之一是在click()事件上使用editButton class 監聽每個按鈕，然后使用$(this) ，它指的是確切的點擊按鈕。 之后，您可以使用每個單獨的按鈕來做任何您想做的事情。

所以你的最終代碼應該是這樣的：

 $(document).ready(function() { $('.editButton').click(function() { console.log('innerHTML is:', $(this).html()) console.log('id is:', $(this).attr('id')) $.ajax({ method: "GET", url: "/testedit.php", }).done(function(data) { var id = $(this).value; /* from result create a string of data and append to the div */ var result = data; var string = '<p>ID is ' + id + '</p><br>'; $("#records").html(string); }); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="records"> <button class="editButton" id="firstButton">button 1</button> <button class="editButton" id="secondButton">button 2</button> <button class="editButton" id="thirdButton">button 3</button> <button class="editButton" id="fourthButton">button 4</button> </div>

Answer 2

您可以使用getAttribute 。 喜歡：

var anchors = document.getElementsByClassName('editButton');

// Id of anchors
id_of_anchor = anchors.getAttribute("id");

參考文獻

編輯

anchor.onclick = function() {
    id_of_anchor = $(this).attr("id");
});

Answer 3

您的應用程序中有 jQuery，使用 jQuery 可以更簡單、更易讀的方法；

$(document).ready(function() {
    $(".editButton").each(function(a, b) {
        $('#' + $(b).attr('id')).on('click', function() {
            $.ajax({
                method: "GET",
                url: "/testedit.php",
            }).done(function(data) {
                var id = $(b).attr('id');

                /* from result create a string of data and append to the div */

                var result = data;
                var string = '<p>ID is ' + id + '</p><br>';

                $("#records").html(string);
            });
        });
    });
});

示例： https://jsfiddle.net/wao5kbLn/

Answer 4

您需要查看 JavaScript closures以及它們如何解決此問題。 當您在 for 循環中添加事件偵聽器時，您需要在 JS 中小心。 當您單擊按鈕時，for 循環已經執行，每次按下按鈕時您將只有最后一個i值。 你可以使用IIFE模式， let關鍵字來解決這個問題。

下面列出了解決此問題的一種簡單方法。

<div id="records"></div>

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>


<script type="text/javascript"> 
  $(document).ready(function(){ 
    var anchors = document.getElementsByClassName('editButton');
    for(var i = 0; i < anchors.length; i++) {           

            //Wrap the function with an IIFE and send i value to the event listener

            (function(anchor){

             anchor.onclick = function() {
               $.ajax({ 
                  method: "GET", 
                  url: "/testedit.php",
               }).done(function( data ) { 
                  var id = anchor.value;

                  /* from result create a string of data and append to the div */

                  var result= data; 
                  var string='<p>ID is '+id+'</p><br>';

                  $("#records").html(string); 
              });
            }

           })(anchors[i]); 

        }
    }
}); 

您可以在JavaScript 循環內閉包中閱讀更多相關信息 - 簡單的實際示例

Answer 5

當運行 onclick function 並使用它時，用 button = this 保存按鈕

 $(document).ready(function(){ 
 var anchors = document.getElementsByClassName('editButton');
   for(var i = 0; i < anchors.length; i++) {
     var button;
     var anchor = anchors[i];
     anchor.onclick = function() {
       button = this;
       $.ajax({ 
         method: "GET", 
         url: "/testedit.php",
       }).done(function( data ) {                   


         /* from result create a string of data and append to the div */

         var result= data; 
         var string='<p>ID is '+ button.value +'</p><br>';

         $("#records").html(string); 
       }); 
     }
   }
}); 

https://jsfiddle.net/x02srmg6/

Answer 6

在你的代碼中..

 var id = anchor.value;

可能

 var id = anchor.id;

但我建議您使用事件委托

如果您有這樣的 html

<div id="buttonArea">
  <a class="editButton" id="1"/>
  <a class="editButton" id="2"/>
  <a class="editButton" id="3"/>
  .......(so many buttons)
</div>

你可以像下面這樣編碼。

$(document).ready(function(){ 
  $('#buttonArea').on('click', 'a.editButton', function (event) {
    var anchor = event.currentTarget;
    $.ajax({ 
      method: "GET", 
      url: "/testedit.php",
    })
    .done(function(data) { 
      var id = anchor.id;

      /* from result create a string of data and append to the div */

      var result= data; 
      var string='<p>ID is '+id+'</p><br>';

      $("#records").html(string); 
    });
}