限制在容器中动态添加输入

Question

我正在尝试动态添加输入和图标，但我想设置限制以将其添加到我的容器（框）中。我的父div为全宽，我将在该父div下的容器中动态附加字段，并且容器的宽度为500px。我不想设置5 or 6 or 7这样的限制。我要做到这一点，当我在容器中动态添加输入字段和图标时，如果该容器没有足够的空间来调整任何其他图标o字段，则它不应添加任何图标输入并返回false并返回错误。] >

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9tSGdwQy5qcGcifQ==” alt =“请参见截图”>

您可以查看此屏幕截图以获取详细信息。我希望我的js将字段或图标添加到我的容器中，直到容器完成为止。

这是我的代码：

function addTextElement() {
  let counter = 1;
  $('.addText-btn').on('click', function(e){
    e.preventDefault();
    let addElementsWrapper = $('.neon-customizer--addElements');

    addElementsWrapper.append(`
		<div class="addText addText`+counter+`" data-id="previewText_${counter}">
            <div class="addText--title">Text element `+counter+`</div>
            <input type="text" class="addText-input" placeholder="Text here..." name="text_element_`+counter+`" />
		</div>
	`);
    $('.neon-preview--content').append(`
		<div class="previewText" id="previewText_${counter}" style="display:none;">
            <span class="previewText-str"></span>
		</div>
	`);
    counter++;
  });
}
addTextElement();

function addShapeElement() {
  let counter = 1;
  $('.addShape-btn').on('click', function(e){
  	e.preventDefault();
    let addShapesWrapper = $('.neon-customizer--addShape');
    addShapesWrapper.append(`
		<div class="addShape addShape`+counter+`" data-id="previewShape_${counter}">
          <div class="addShape--title">Shape element `+counter+`</div>
          <div class="addShape-selectOptions">
            <div>
              <select name="select_shape_`+counter+`" class="selectShapeIcon">
                <option value="">Select shape</option>
                <option value="heart">Heart</option>
                <option value="star">Star</option>
                <option value="circle">Circle</option>
                <option value="close">Close</option>
                <option value="plus">Plus</option>
              </select>
            </div>
            </div>
      </div>
	`);
    $('.neon-preview--content').append('<div class="previewShape" id="previewShape_'+counter+'"></div>');
    counter++;
  });
}
addShapeElement();


function previewText() {
  $('body').on('input', 'input.addText-input', function(){
  	let inputVal = $(this).val();
    let inputID = $(this).parents('.addText').attr("data-id");
    console.log(inputID);
    $('#'+inputID).show();
    $('#'+inputID).find('.previewText-str').text(inputVal);
  });
}
previewText();

function selectShape() {
  
  let heartSvg = '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M474.644,74.27C449.391,45.616,414.358,29.836,376,29.836c-53.948,0-88.103,32.22-107.255,59.25c-4.969,7.014-9.196,14.047-12.745,20.665c-3.549-6.618-7.775-13.651-12.745-20.665c-19.152-27.03-53.307-59.25-107.255-59.25c-38.358,0-73.391,15.781-98.645,44.435C13.267,101.605,0,138.213,0,177.351c0,42.603,16.633,82.228,52.345,124.7c31.917,37.96,77.834,77.088,131.005,122.397c19.813,16.884,40.302,34.344,62.115,53.429l0.655,0.574c2.828,2.476,6.354,3.713,9.88,3.713s7.052-1.238,9.88-3.713l0.655-0.574c21.813-19.085,42.302-36.544,62.118-53.431c53.168-45.306,99.085-84.434,131.002-122.395C495.367,259.578,512,219.954,512,177.351C512,138.213,498.733,101.605,474.644,74.27z M309.193,401.614c-17.08,14.554-34.658,29.533-53.193,45.646c-18.534-16.111-36.113-31.091-53.196-45.648C98.745,312.939,30,254.358,30,177.351c0-31.83,10.605-61.394,29.862-83.245C79.34,72.007,106.379,59.836,136,59.836c41.129,0,67.716,25.338,82.776,46.594c13.509,19.064,20.558,38.282,22.962,45.659c2.011,6.175,7.768,10.354,14.262,10.354c6.494,0,12.251-4.179,14.262-10.354c2.404-7.377,9.453-26.595,22.962-45.66c15.06-21.255,41.647-46.593,82.776-46.593c29.621,0,56.66,12.171,76.137,34.27C471.395,115.957,482,145.521,482,177.351C482,254.358,413.255,312.939,309.193,401.614z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>';
  let starSvg = '<svg height="511pt" viewBox="0 -10 511.98685 511" width="511pt" xmlns="http://www.w3.org/2000/svg"><path d="m114.59375 491.140625c-5.609375 0-11.179688-1.75-15.933594-5.1875-8.855468-6.417969-12.992187-17.449219-10.582031-28.09375l32.9375-145.089844-111.703125-97.960937c-8.210938-7.167969-11.347656-18.519532-7.976562-28.90625 3.371093-10.367188 12.542968-17.707032 23.402343-18.710938l147.796875-13.417968 58.433594-136.746094c4.308594-10.046875 14.121094-16.535156 25.023438-16.535156 10.902343 0 20.714843 6.488281 25.023437 16.511718l58.433594 136.769532 147.773437 13.417968c10.882813.980469 20.054688 8.34375 23.425782 18.710938 3.371093 10.367187.253906 21.738281-7.957032 28.90625l-111.703125 97.941406 32.9375 145.085938c2.414063 10.667968-1.726562 21.699218-10.578125 28.097656-8.832031 6.398437-20.609375 6.890625-29.910156 1.300781l-127.445312-76.160156-127.445313 76.203125c-4.308594 2.558594-9.109375 3.863281-13.953125 3.863281zm141.398438-112.875c4.84375 0 9.640624 1.300781 13.953124 3.859375l120.277344 71.9375-31.085937-136.941406c-2.21875-9.746094 1.089843-19.921875 8.621093-26.515625l105.472657-92.5-139.542969-12.671875c-10.046875-.917969-18.6875-7.234375-22.613281-16.492188l-55.082031-129.046875-55.148438 129.066407c-3.882812 9.195312-12.523438 15.511718-22.546875 16.429687l-139.5625 12.671875 105.46875 92.5c7.554687 6.613281 10.859375 16.769531 8.621094 26.539062l-31.0625 136.9375 120.277343-71.914062c4.308594-2.558594 9.109376-3.859375 13.953126-3.859375zm-84.585938-221.847656s0 .023437-.023438.042969zm169.128906-.0625.023438.042969c0-.023438 0-.023438-.023438-.042969zm0 0"/></svg>';
  let circleSvg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M256,0C114.509,0,0,114.497,0,256c0,141.491,114.497,256,256,256c141.491,0,256-114.497,256-256C512,114.509,397.503,0,256,0z M256,477.867c-122.337,0-221.867-99.529-221.867-221.867S133.663,34.133,256,34.133S477.867,133.663,477.867,256S378.337,477.867,256,477.867z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>';
  let closeSvg = '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><g><g><path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285L284.286,256.002z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>';
  let plusSvg = '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>';
  
  $('body').on('change', 'select.selectShapeIcon', function(){
  	let selectedShapeVal = $(this).val();
    let selectShapeID = $(this).parents('.addShape').attr('data-id');
    
    let previewShape = $('#'+selectShapeID);
    switch(selectedShapeVal) {
      case 'heart':
        previewShape.html(heartSvg);
      	break;
      case 'star':
        previewShape.html(starSvg);
      	break;
      case 'circle':
        previewShape.html(circleSvg);
      	break;
      case 'close':
        previewShape.html(closeSvg);
      	break;
      case 'plus':
        previewShape.html(plusSvg);
      	break;
    }
  });
  
}
selectShape();
.neon-preview--content {
    max-width: 500px;
    height: 360px;
    width: 100%;
}
.previewShape svg {
    width: 20px;
    height: 20px;
}
.neon-preview--content {
    display: flex;
    flex-wrap: wrap;
}

.neon-preview--content > div {
    padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button type="button" class="addText-btn">Add text</button>
  <button type="button" class="addShape-btn">Add Shape</button>
</div>
<div class="neon-customizer--addElements"></div>
<div class="neon-customizer--addShape"></div>

<div class="neon-preview--content__wrapper">
  <div class="neon-preview--content"></div>
</div>

您能帮我根据需要设置限制吗？请帮助我实现这一目标，我被困住了。

我正在尝试动态添加输入和图标，但我想设置限制以将其添加到我的容器（框）中。我的父div是全角，并且我在...

Answer 1

我想到的第一个解决方案是计算，喜欢：

function can_add_more(){
    var max = $('.wrapper').width();
    var used_width = 0;
    $('.previewText, .previewShape').each(function(){
        used_width += $(this).width();
    });
    var avalible = max - used_width;
    if (avalible >= 100){ // minimal avalible space per element in px
        return true;
    }else{
        return false; 
    }
}