добавление нескольких кнопок динамически и добавление каждого обработчика кликов в jQuery

Question

Я пытаюсь динамически добавлять кнопки с JQuery, теперь для каждой кнопки я хочу выполнить другое действие, как я могу его достичь? Каждая пара кнопок будет переключаться после выполнения действия , например.

• показать 1 после того, как щелчок становится hide1
• показать 2 после того, как щелчок становится hide2
• показать 3 после того, как щелчок становится hide3

Я создал JSFiddle, чтобы показать то, что я достиг до сих пор.

var randomMeetings = Math.floor(Math.random() * 10) + 1; 


for(var i = 0; i < randomMeetings; i++){ 
    var expandClient = '<button type="button" class="hide_client" id="_hide_'+ i +'"><i  class="fa fa-plus-square-o"></i></button><button type="button" class="show_client" id="_show_'+ i +'"><i class="fa fa-minus-square-o"></i></button>' 

    $('#myButtons').append(expandClient); 

} 

for (var i = 0; i < randomMeetings; i++){ 

    $('#_show_'+i).click(function() { 
     $('#_hide_'+i).toggle();  
    }); 
    $('#_hide_'+i).click(function() { 
     $('#_show_'+i).toggle(); 

    }); 
} 

Answer 1

Эта линия внутри для цикла не является действительным:

$('#_hide_'+i).toggle(); 

Это происходит потому, что, когда на концах петли и в будущем событие щелчка происходит значение переменной я всегда последним.

Вы можете изменить линию (или использовать замыкание, как IIFE или let или добавить атрибут элемента):

$('#' + this.id.replace('hide', 'show')).toggle(); 

Так что всякий раз, когда вы нажимаете на «_hide_0» вы переключите «_show_0» и так на.

Сниппет (updated jsfiddle):

var randomMeetings = Math.floor(Math.random() * 10) + 1; 
 

 

 
for(var i = 0; i < randomMeetings; i++){ 
 
    var expandClient = '<button type="button" class="hide_client" id="_hide_'+ i + 
 
      '"><i class="fa fa-plus-square-o"></i>' + i + '</button>' + 
 
      '<button type="button" class="show_client" id="_show_'+ i 
 
      +'"><i class="fa fa-minus-square-o"></i>' + i + '</button>' 
 

 
    $('#myButtons').append(expandClient); 
 

 
    $('#_show_'+i).click(function() { 
 
     var eleId = this.id.replace('show', 'hide'); 
 
     console.log("show " + eleId) 
 
     $('#' + eleId).toggle(); 
 
    }); 
 
    $('#_hide_'+i).click(function() { 
 
     var eleId = this.id.replace('hide', 'show'); 
 
     console.log("hide " + eleId) 
 
     $('#' + eleId).toggle(); 
 

 
    }); 
 
}

.hide_client,.show_client{ 
 
    padding:3em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="myButtons"> 
 

 
</div>

Answer 2

Я редактировал ответ Гаэтано с одной линией, чтобы скрыть и отобразить кнопку один раз щелкнул я обновил JS скрипку: JSFiddle

$(this).css('display', 'none');