javascript - 无法从 HTML 数据集中访问值
问题描述
在从一个 div 拖放到另一个 div 时,我使用 Dataset 来获取一些不同的值。但我无法访问其他属性,例如data-customerId
调用 Javascript 函数时。
带有 PHP 动态数据的 HTML:
<fieldset id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<legend style="color:cadetblue; border:white; width:auto; font:bold">Vacant parking spots</legend>
<?php $counter = 0; foreach ($sql_get_vacant_spots_results_ as $row) { ?>
<div id="<?php echo $counter; ?>" data-customerid="<?php echo $arr_users[0]['customer_id']; ?>" data-y="<?php echo $row['spot_no'] ?>" data-z="<?php echo $row['location_id'] ?>" style="float: left; width: 120px;height: 80px;padding: 10px;border-radius: 20px;margin: 10px;background-color: cadetblue;" draggable="true" ondragstart="drag(event)" width="88" height="31">
<labled style="color: white; font:bold; font-size:large;"><?php echo 'Spot: ' . $row['spot_no'] . ' Gate: ' . $row['parking_gate_id'] ?></label>
</div>
<?php $counter++; } ?>
</fieldset>
<fieldset id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<legend style="color:cadetblue; border:white; width:auto; font:bold">Current parking spots of the customer</legend>
<?php $count = 0; foreach ($arr_users as $user) { ?>
<div id="<?php echo $count ?>" data-customerid="<?php echo $user['customer_id'] ?>" data-y="<?php echo $user['spot_id'] ?>" data-z="<?php echo $user['location_id'] ?>" style="float: left; width: 120px;height: 80px;padding: 10px;border-radius: 20px;margin: 10px;background-color: cadetblue;" draggable="true" width="88" height="31">
<labled style="color: white; font:bold; font-size:large;"><?php echo 'Spot: ' . $user['spot_id'] . ' Gate: ' . $user['gate_id'] ?></label>
</div>
<?php $count++; } ?>
</fieldset>
这是Javascript:
function drop(ev) {
const el = document.querySelector('#' +ev.dataTransfer.getData("text")); //prints: Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#33' is not a valid selector.
console.log('drop', el.dataset.customerid);
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
解决方案
通过像这样访问 id 来修复:
const el = document.querySelector("[id=" + "\'" + ev.dataTransfer.getData("text") + "\'" + "]");
编辑:
html元素id:
id="count_id<?php echo $counter; ?>"
推荐阅读
- r - 在两个元素组中变异
- excel - Power Query 与附加表合并
- marklogic - Marklogic Datahub:如何编辑 TDEX 文件并生成三元组?
- python - pandas,数据框将列保存为字符串格式
- r - R:将时间戳转换为(尽可能短的)整数
- docker - OpenShift 4 错误:读取清单时出错
- javascript - 获取反应组件的未定义值 | 节点js | 反应
- html - 根据每个表格行中的单元格值更改按钮文本 - Jquery
- python - 用 beautifulsoup4 和 pyTorch 总结维基百科页面
- npm - ReferenceError: primordials 未定义 - bootstrap 4 install