Jquery клонирование ввода с меткой на основе идентификатора - PullRequest
0 голосов
/ 03 мая 2020

Здравствуйте, у меня есть входной файл, и мне нравится стиль ввода, и я не могу получить его без метки и идентификатора.

Я провел в нем пару часов, и я решил, я просто хочу знать, есть лучшее решение?

          $("body").on("click",".btn-success",function(){
          $('.clone .custom-file-label').attr('class', 'custom-file-label')
          var html = $(".clone").html();
          var NewN = html.match(/id="(.*?)"/)[1];
          $('#' + NewN).attr("id", parseInt(NewN) + 1);
          $('.clone .custom-file-label').attr("for", parseInt(NewN) + 1);
          $(".increment").after(html);
      });

      $("body").on("click",".btn-danger",function(){
          $(this).parents(".control-group").remove();
      });

https://jsfiddle.net/jctrn2kh/1/

1 Ответ

1 голос
/ 03 мая 2020
  1. Я бы наверняка отделил логи c от DOM (например, не полагаясь на DOM для ID)
  2. Поместите шаблон в скрипт JS, чтобы я мог изменить внешний вид и логика c, которые он использует легко
  3. Уменьшит область реагирования на щелчки по динамически создаваемым элементам (например, не "тело", а "контейнер")
  4. Я бы извлек все CSS стиль для разделения CSS

Все это в этом фрагменте:

// keeping track of IDs
let id = 1

// create item to be appended
const addFileInput = (id) => {
  // creating base node that will be returned
  const node = document.createElement('div')
  // setting classes on base node
  node.classList.add('custom-file', 'mb-3')
  // creating innerHTML of node
  node.innerHTML = `<input type="file" name="filename[]" id="${id}">
  <button class="btn btn-${id === 1 ? 'success' : 'danger'}" type="button">${id === 1 ? '+' : '-'}</button>
  <label class="custom-file-label" for="${id}">Choosse file</label>`
  // returning the node
  return node
}

// append the first input field (type: node)
const container = document.getElementById('field-container')
container.appendChild(addFileInput(id))

// functions for onClick
$(document).ready(function() {

  $(container).on("click", ".btn-success", function() {
    // incrementing the ID BEFORE appending
    container.appendChild(addFileInput(++id))
  });

  $(container).on("click", ".btn-danger", function() {
    // removing the exact element
    $(this).parents('.custom-file').remove();
  });

});
.control-group .custom-file {
  width: 300px;
  display: flex;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="field-container" class="control-group">
  <!-- will be filled out by JavaScript -->
</div>

Этот код может показаться не таким простым, как ваш, но его можно изменить намного проще

  • шаблон, созданный здесь является основой, и если вы измените это, все будет следовать за модификацией
  • функции не полагаются ни на какие идентификаторы - если вы их опустите, клики все равно добавят и удалят элементы (ОК, метки и поля не будут соответствовать друг другу)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...