добавление нескольких слушателей событий ajax

Question

Я пытаюсь повторить запрос ajax, но всякий раз, когда я пытаюсь запустить код, i всегда по умолчанию 1 Я не очень знаком с js и Интересно, кто-нибудь знает, как это сделать, или есть ли лучший способ сделать это вообще. Заранее спасибо!

$.each(Array(10), function(i) {
            var clickedButton = $('#' + (++i));
            $(clickedButton).click(function (){
                $.ajax({
                    type: 'POST',
                    url: 'example.php',
                    data: {lightid: i},
                    success:function(result){}
                });
            });
          });

Answer 1

Вы можете достичь желаемого результата, используя атрибут data с необходимыми данными для каждой «кнопки». Это можно выбрать через this.dataset.<attribute-name> и отправить на сервер:

$('[data-id]').on('click',function(){
 $.post('https://jsonplaceholder.typicode.com/posts',{lightid:this.dataset.id})
  .done(r=>console.log(r))
})

div[data-id] {cursor:pointer}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Click on any div below:</div>
<div data-id="1">one</div>
<div data-id="2">two</div>
<div data-id="3">three</div>
<div data-id="4">four</div>
<div data-id="5">five</div>
<div data-id="6">six</div>
<div data-id="7">seven</div>
<div data-id="8">oneeight</div>
<div data-id="9">nine</div>
<div data-id="10">ten</div>

Я использовал атрибут data-id для хранения числовой информации, поскольку атрибут html id всегда должен иметь значения, начинающиеся с алфавитный символ.