Как мне получить элемент с определенным c ID из getElementsByClassName? - PullRequest
Новая
       9

Как мне получить элемент с определенным c ID из getElementsByClassName?

0 голосов
/ 29 мая 2020

РЕДАКТИРОВАТЬ: РЕШЕНО. Всем спасибо!

Я новичок в программировании: D Мой код ниже. Дело вот в чем: у меня есть несколько кнопок, но я хочу сделать так, чтобы одно и то же происходило каждый раз, когда нажимается любая из этих кнопок, но каждая кнопка также имеет определенное значение c, и я также хочу, чтобы это определенное c значение для распечатки. Мой код просматривает документ и просматривает все элементы с классом editButton и правильно идентифицирует все кнопки, но проблема в том, что независимо от того, какую кнопку я нажимаю, я всегда получаю значение последней кнопки, потому что var id назначается только после завершения for l oop и находится на последнем элементе. Я попытался создать глобальную переменную и присвоить ей значение, но результат тот же. Я попытался завершить для l oop, прежде чем перейти к .done (function (data), но у меня возникла ошибка. Может ли кто-нибудь мне помочь? Спасибо! 

$(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>

Ответы [ 6 ]

1 голос
/ 29 мая 2020

На самом деле, вместо того, чтобы делать огромное количество oop для добавления onclick событий к вашим кнопкам, один из лучших способов сделать это - прослушивать каждую кнопку с editButton классом на click(), затем используйте $(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>
0 голосов
/ 29 мая 2020

В вашем коде .. 

 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); 
    });
}
0 голосов
/ 29 мая 2020

сохранить кнопку с помощью button = this при запуске функции onclick и использовать ее 

 $(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/

0 голосов
/ 29 мая 2020

Вам нужно посмотреть JavaScript closures и узнать, как они работают, чтобы решить эту проблему. Когда вы добавляете слушателей событий внутри для l oop, вам нужно быть осторожным в JS. Когда вы нажимаете кнопку, l oop уже выполняется, и у вас будет только последнее значение 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 закрытие внутри петель - простой практический пример

0 голосов
/ 29 мая 2020

У вас есть 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/

0 голосов
/ 29 мая 2020

Вы можете использовать getAttribute. Например: 

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

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

Ссылки

РЕДАКТИРОВАТЬ 

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