Как эффективно использовать «this» в этой функции, чтобы она не влияла на другие события щелчка? - PullRequest
Новая
       8

Как эффективно использовать «this» в этой функции, чтобы она не влияла на другие события щелчка?

0 голосов
/ 26 февраля 2020

Я не понимаю, в чем здесь проблема. Основное назначение кода - создать динамическую строку c и удалить ее. Мой код работает нормально. Но главная проблема здесь в том, что когда я использую функцию для вызова избыточного кода, тогда, если я нажимаю на одном модуле (странице), это влияет на другую страницу. я

dynamicRow. js

$(document).ready(function () {
    var $schoolAdd = $(document).find('div.schoolAdd');
    var $collegeAdd = $(document).find('div.collegeAdd');

 var $deleteButton='<div><button type="submit" class="reservedFieldRemoveButton"><i class="fa fa-minus"></i></button></div>';


   $schoolAdd.on('click','button.addButton',function(){
            var $parent= $(this).parent().parent();
            $(this).remove();
            $parent.append($deleteButton);
            $rschoolAdd.append($reservedRowToAppend);
        });
    $collegeAdd.on('click','button.addButton',function(){
            var $parent= $(this).parent().parent();
            $(this).remove();
            $parent.append($deleteButton);
            $collegeAdd.append($reservedRowToAppend);
        });
})

это прекрасно работает для школы и колледжа. Но проблема в том, что когда я делаю это в функции, то 

  function testFunction(addButton){
       var $parent= $(addButton).parent().parent();
       $(addButton).remove();
       $parent.append($deleteButton);
  }
  $schoolAdd.on('click','button.addButton',function(){
            testFunction('button.addButton');
            $rschoolAdd.append($reservedRowToAppend);
  });
  $collegeAdd.on('click','button.addButton',function(){
            testFunction('button.addButton');
            $collegeAdd.append($reservedRowToAppend);
  });

Но для использования этой функции, когда я щелкаю по событию школьного модуля, я видел, что модуль колледжа также затрагивается. Но этого не должно быть. Это индивидуальная функция. Я мог бы использовать «это» неправильно в функции, я думаю. Как я могу решить это?

1 Ответ

2 голосов
/ 26 февраля 2020

Поскольку вы получаете доступ ко всем элементам кнопки во всем DOM, у которого есть класс .addButton, а не только по нажатому. Почему ты не использовал «это»?

Я представил ваш код HTML, потому что вы не опубликовали (не забудьте сделать в следующий раз): 

$(document).ready(function () {
    var $schoolAdd = $(document).find('div.schoolAdd');
    var $collegeAdd = $(document).find('div.collegeAdd');

 var $deleteButton='<div><button type="submit" class="reservedFieldRemoveButton"><i class="fa fa-minus"></i>delete</button></div>';
    function testFunction(addButton){
           var $parent= $(addButton).parent().parent();
           $(addButton).remove();
           $parent.append($deleteButton);
      }
      $schoolAdd.on('click','button.addButton',function(){
                testFunction(this);
                $schoolAdd.append("added!");
      });
      $collegeAdd.on('click','button.addButton',function(){
                testFunction(this);
                $collegeAdd.append("added!");
      });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="schoolAdd"><div><button class="addButton">add</button></div></div>
<div class="collegeAdd"><div><button class="addButton">add</button></div></div>
...