我对 jquery/javascript 有点陌生，我有一个任务需要帮助。我正在制作座位表。每个桌面对象都有一个数据 ID。用户对象也有数据 ID。我理想中想做的是在页面加载时，jquery/javascript 将循环遍历所有桌面对象和所有用户对象并查找匹配项。如果存在匹配，则将用户对象重新定位在 table 对象上以表示坐在该 table 上的用户。我不知道从哪里开始，任何帮助将不胜感激......
现在的基本示例
<td class="desk" data-id="4-1"></td>//desk object
<td class="desk" data-id="4-2"></td>//desk object
<td class="desk" data-id="4-3"></td>//desk object
<span class="user" data-id="4-1"></span>//user object
<span class="user" data-id="4-2"></span>//user object
更新
我可能需要你们更多的帮助...... 我想要编码的逻辑如下: 1)当页面加载时(将使用php从数据库加载元素)，将所有用户元素移动到匹配的桌面(谢谢大家的建议)。 2) 可能存在多个用户被分配到一张办公 table 的情况。在这种情况下，需要添加一个共享的 css 类(显示 2 种颜色，表明不止一个用户坐在那里)。
问题:
我使用了内森的代码。如何调整此代码以考虑到同一数据 ID 的两个匹配，并添加 css 类“共享”以及元素信息(信息很可能是由 php 填充的数据库 ID)？我将两个用户元素调整为与其中一张 table 相同的数据 ID。
这是有关我的项目的更多信息(我删除了代码中的一些冗余或不必要的部分):
<style>
#elementContainer {
background: green;
bottom: -180px; //theres animation for this that i have not included since its not relevent
width: 100%;
position: fixed;
}
.shared {
background-image: linear-gradient(bottom, pink 50%, red 50%);
background-image: -o-linear-gradient(bottom, pink 50%, red 50%);
background-image: -moz-linear-gradient(bottom, pink 50%, red 50%);
background-image: -webkit-linear-gradient(bottom, pink 50%, red 50%);
background-image: -ms-linear-gradient(bottom, pink 50%, red 50%);
}
.dragTest{
height: 50px;
width: 50px;
background: red;
display: inline-block;
position: absolute;
z-index: 11;
}
td{
height: 50px;
width: 50px;
margin: 1px;
background: blue;
display: inline-block;
}
.row{
margin-bottom: 30px;
}
</style>
<div class='seatingChart'>
<div class="container">
<div class="row">
<div class="col-md-2"><!-- Group 5 -->
<table>
<tr>
<td class="desk" data-id="5-1"></td>
<td class="desk" data-id="5-2"></td>
</tr>
<tr>
<td class="desk" data-id="5-3"></td>
<td class="desk" data-id="5-4"></td>
</tr>
<tr>
<td class="desk" data-id="5-5"></td>
<td class="desk" data-id="5-6"></td>
</tr>
<tr>
<td class="desk" data-id="5-7"></td>
<td class="desk" data-id="5-8"></td>
</tr>
</table>
</div><!-- End of Group 5 -->
</div>
</div>
</div>
<div id='elementContainer'>
<div class="container">
<div class='row'>
<div class='col-md-4 col-md-offset-4'>
<div class="user" data-id="5-8" data-name='Terry' info=""></div>
<div class="user" data-id="5-2" data-name='Carlos' info=""></div>
<div class="user" data-id="5-1" data-name='Mary' info=""></div>
<div class="user shared" data-id="5-1" data-name='Tammy' info=""></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.desk').each(function() {
var $desk = $(this),
deskId = $desk.data('id'),
$users = $('.dragTest[data-id="' + deskId + '"]');
if($users.length) {
$desk.append($users);
}
});
});//end of script
</script>
请您参考如下方法:
由于有关页面结构以及每个单独 dom 对象需要发生的情况的信息很少，因此我将限制我的响应以收集类似 id 的项目。
本质上，您需要从您的办公 table 开始，并为每个办公 table 收集需要链接到它的用户。您可以通过 jQuery 的 each 方法来实现此目的。
$('.desk').each(function() {
var $desk = $(this),
deskId = $desk.data('id'),
$users = $('.user[data-id="' + deskId + '"]');
// You now have a jQuery array of users with id's that match
// this desk. Specific code goes here.
});
显然，上面的代码的实用性有限，但如果没有更多信息，就很难提供更具体的指导。
