Question

你好，我有一个输入文件，我喜欢输入样式，没有标签和ID就无法获得它

我花了几个小时解决了它，我只想知道还有更好的解决方案吗？

Traceback (most recent call last):

  File "<ipython-input-94-453876631fe0>", line 3, in <module>
    data_df = pd.read_sql(sql, qq)

  File "***\AppData\Local\Continuum\anaconda3\lib\site-packages\pandas\io\sql.py", line 380, in read_sql
    chunksize=chunksize)

  File "***\AppData\Local\Continuum\anaconda3\lib\site-packages\pandas\io\sql.py", line 1468, in read_query
    cursor = self.execute(*args)

  File "***\AppData\Local\Continuum\anaconda3\lib\site-packages\pandas\io\sql.py", line 1426, in execute
    cur = self.con.cursor()

TypeError: 'pyodbc.Cursor' object is not callable

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

Answer 1

我会确保逻辑与DOM分离（例如，不依赖DOM来获取ID）
将模板放入JS脚本中，以便我可以轻松修改其外观和逻辑
将减小对动态创建的元素（例如，不是“ body”而是“ container”）的点击做出反应的范围
我将提取所有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>

此代码似乎并不比您的代码简单，但可以轻松修改

此处创建的模板是基础，如果您对其进行修改，则所有操作都将遵循该修改
这些功能不依赖任何ID-如果您将其省略，则单击仍会添加和删除项目（确定，然后标签和字段将无法组合在一起）

jQuery克隆具有基于ID的标签的输入

1 个答案: