两个互不影响的不同功能的重复jQuery代码

时间:2019-05-04 12:07:10

标签: javascript jquery

我有一个具有“添加更多”的多重上传表单字段,html源代码和jQuery运行良好,即,每当我单击“添加更多”时,它都会不断添加

我想通过复制html和复制jquery来复制上述功能,但是一个功能会影响另一个

我已将其复制并在第二个jquery中更改了一些ID,但无法正常工作

//第一个html用于多上传

<div class="controls">
                      <div class="entry input-group col-xs-3">
                        <input class="form-control" name="fields[]" type="file" >
                        <span class="input-group-btn">
                            <button class="btn btn-primary btn-add" type="button" style="font-size: 26px;">
                               <i class="fa fa-plus"></i>
                            </button>
                        </span>
                      </div>

                  </div> 

//第二个html用于多次上传

<div class="controls">
                      <div class="entry input-group col-xs-3">
                        <input class="form-control" name="fields[]" type="file" >
                        <span class="input-group-btn">
                            <button class="btn btn-primary btn-add" type="button" style="font-size: 26px;">
                               <i class="fa fa-plus"></i>
                            </button>
                        </span>
                      </div>

                  </div>   






//first jquery
 <script type="text/javascript">
  $(function()
{
    $(document).on('click', '.btn-add', function(e)
    {
        e.preventDefault();

        var controlForm = $('.controls:first'),
            currentEntry = $(this).parents('.entry:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

        newEntry.find('input').val('');
        controlForm.find('.entry:not(:last) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('btn-success').addClass('btn-danger')
            .html('<i class="fa fa-minus"></i>');
    }).on('click', '.btn-remove', function(e)
    {
      $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});








///second jquery
  $(function()
{
    $(document).on('click', '.btn-add2', function(e2)
    {
        e2.preventDefault();

        var controlForm2 = $('.controls:first'),
            currentEntry2 = $(this).parents('.entry:first'),
            newEntry2 = $(currentEntry2.clone()).appendTo(controlForm2);

        newEntry2.find('input').val('');
        controlForm2.find('.entry:not(:last) .btn-add2')
            .removeClass2('btn-add2').addClass('btn-remove2')
            .removeClass2('btn-success').addClass('btn-danger')
            .html2('<i class="fa fa-minus"></i>');
    }).on('click', '.btn-remove2', function(e2)
    {
      $(this).parents('.entry:first').remove();

    e2.preventDefault();
    return false;
  });
});





</script>

当第一个多重上传被clickig plus单击时,它应继续添加,与第二个多重点击被clickig plus单击时,应继续添加更多。

0 个答案:

没有答案