用JQuery创建多个具有升序ID的HTML元素？

Question

以下是所需做的：

<input type="text" id="main" placeholder="Put URL Here">

每次用户按下回车键（或屏幕侧面的按钮）时，我需要Jquery创建：

<input type="hidden" id="url_1" readonly value='<-- input value from main-->'>
<!-- user adds another to #main -->
<input type="hidden" id="url_2" readonly value='<-- input value from main-->'>
<!-- etc -->

到目前为止，我只使用 HTML 已经得到了如下的结果：

<figure class="mb-4">
<input type="text" name="" id="" placeholder="Image URL">
<button id="addimage">Add Image</button>
<button id="uploadimage_js">Upload Image</button>
</figure>

对于上传图片按钮，它会将图片提交到我的PHP上传图片程序并返回图片的URL。

- user655355

Answer 1

创建一个用于隐藏URL的div，例如：

<div id="urls"></div>

在jQuery中尝试

var counter = 1;
$('#main').keypress(function (e) {
 if(e.which== 13){  // enter key code
    var url = $('#main').val();
    $('#urls').append('<input type="hidden" id="url_'+ counter +'" readonly value="' + url + '" >');
    $('#main').val(''); //clearing the input
    counter++;
  }
});   

- shubham kakade

Answer 2

这将把隐藏的输入添加到您的<form>标签的末尾。它还保留了一个URL数组，以防有用。对于这个片段，它在一个div中显示数组。

let urls = [], limit = 2, main, addButton, resetButton
window.addEventListener('load', () => {
  main = document.querySelector('#main'),
  addButton = document.querySelector('[data-url-saver]'),
  resetButton = document.querySelector('[data-url-reset]');
  addButton.addEventListener('click', () => saveURL())
  resetButton.addEventListener('click', () => reset())
  })

const saveURL = () => {
  let u = main.value;
  urls.push(u);
  let h = `<input type="hidden" data-url-hidden id="url_${urls.length}" readonly value=${u} />`
  document.querySelector('form').insertAdjacentHTML('beforeend', h);
  main.value = "";
  let de = document.querySelector('#debug');
  de.innerHTML = urls.join(", ");
  if (urls.length >= limit) {
    addButton.setAttribute('disabled', 'disabled');
    main.setAttribute('disabled', 'disabled');
    main.setAttribute('placeholder', 'Maximum URLs accepted')
  }
}

const reset = () => {
  urls = [];
  document.querySelectorAll('[data-url-hidden]').forEach(e => e.parentNode.removeChild(e));
  addButton.removeAttribute('disabled');
  main.removeAttribute('disabled');
  document.querySelector('#debug').innerHTML = "";
}

<form>
  <input type="text" id="main" placeholder="Put URL Here">
  <button data-url-saver type='button'>enter</button>
  <button data-url-reset type='button'>reset</button>
</form>

<div id='debug'></div>

- Kinglish

---

这正是我想要的方式，谢谢。我有一个问题，是否有一种方法可以限制它运行的次数？（我只想让它运行20次，然后阻止用户再输入更多） - user655355

好的，已经更新了一个 limit 变量。在代码片段中它被设置为2，这样你就可以测试它了。干杯！ - Kinglish

@Kinglish，你可能想考虑将document.querySelector('#main')缓存到一个变量中。这会使你的代码更加简短和整洁。 - Andy

jQuery并不是必须的，只是更容易（因为我不太熟悉纯JavaScript，只熟悉jQuery）。但我能理解你是如何做到的。 - user655355

好的，已经更新了一个重置按钮和@Andy的优秀代码缩减建议。请注意，我将按钮事件监听器包装在window.load监听器中，以确保页面在这些监听器启动之前有机会渲染。 - Kinglish

Answer 3

如果您想添加升序URL并且已经有了链接，则可以使用以下函数。

function addImage(){
  var link = document.querySelector('#main').value;
  var all_links = document.getElementById('all_urls');
  if (link.length > 0){
    code = `
    <input type="hidden" id="url_${all_links.children.length}" value="${link}"/>
    `
    all_links.innerHTML += code;
    console.log(document.getElementById('all_urls'))
  }
}

<figure class="mb-4">
<input type="text" id="main" placeholder="Put URL Here">
<div id="all_urls">
<!--All the links are added here-->
</div>
<button id="addimage" onclick="addImage()">Add Image</button>
<button id="uploadimage_js">Upload Image</button>
</figure>

- Parvat . R

Answer 4

在jQuery中

// Cache some elements
const div = $('div');
const main = $('#main');

$('button').click(() => {

 // Grab the value
 const val = main.val();

 // Create the id based on the current
 // number of inputs 
 const id = div.find('input').length + 1;

 // Append the new input
 div.append(`<input readonly id="url_${id}" value="${val}" />`);

 // Reset the main input 
 main.val('');

});

div { margin-top: 1em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="main" />
<button>Click</button>
<div></div>

在纯JS中的等效代码：

// Cache some elements
const div = document.querySelector('div');
const main = document.querySelector('#main');
const button = document.querySelector('button');

button.addEventListener('click', handleClick, false)

function handleClick() {

 // Create the id based on the current
 // number of inputs 
 const id = div.querySelectorAll('input').length + 1;

  const html = `<input readonly id="url_${id}" value="${main.value}" />`;

 // Append the new input
 div.insertAdjacentHTML('beforeend', html);

 // Reset the main input 
 main.value = '';

};

div { margin-top: 1em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="main" />
<button>Click</button>
<div></div>

- Andy