我在表中有一系列<td>
元素,在我的上下文中,这些元素是用户可以选择的空间的"插槽"。每个插槽都有一个属性(data-slot-stamp
),该属性容纳了插槽的ID(时间戳)。当用户单击一个插槽时,将时间戳添加到另一个元素(.addButton
)属性data-selected-slots
中。如果用户再次单击插槽,则应从.addButton
的数据选择插话插件属性中删除该插槽。以下摘要正在工作,除了用户从选择中删除插槽的情况下,首次单击。
所需行为的示例:
- 用户单击任何插槽
- 该插槽的数据 - 插槽stamp属性的值添加到.addbutton元素的数据选择插话属性的值
- 如果用户再次单击相同的插槽,则应从.addbutton元素的数据选择插话词的属性中删除该插槽的数据插入式符号属性的值。
在我的情况下发生了什么:
- 用户单击任何插槽
- 该插槽的数据 - 插槽stamp属性的值添加到.addbutton元素的数据选择插话属性的值
- 如果用户再次单击相同的插槽(但仅当它是第一个插槽,因为一个页面刷新)该插槽的数据 - 插槽stamp属性的值不会被删除,但请停留在data-的值中。选定插槽属性。
- 在任何插槽的随后点击中,该功能可按预期工作,但是最初单击的插槽的数据永远不会删除。
HTML结构:
<table class="spacesTable">
<tr>
<td class="slot used unselected" data-slot-stamp="123456789">
Slot 1
</td>
<td class="slot used unselected" data-slot-stamp="987654321">
Slot 2
</td>
<td class="slot used unselected" data-slot-stamp="654321987">
Slot 3
</td>
<td>
<div class="addButton" data-selected-slots="">
Add Button
</div>
</td>
</tr>
</table>
相关jQuery:
$('.spacesTable').on('click', '.slot.used', function() {
var curAtts = $(this).siblings('.addButton').attr('data-selected-slots');
var clickedStamp = $(this).attr('data-slot-stamp');
if ($(this).hasClass('unselected')) {
$(this).addClass('selected').removeClass('unselected');
//Add to the values stored in the data-selected-slots attr of the button for this row
var spacer = ',';
if (!curAtts) {
curAtts = '';
spacer = '';
}
$(this).siblings('.addButton').attr('data-selected-slots', clickedStamp+spacer+curAtts);
} else if ($(this).hasClass('selected')) {
$(this).removeClass('selected').addClass('unselected');
//check to see if the slot timestamp is in the button's data-selected-slots attr, and if so, remove it
var findStamp = curAtts.indexOf(clickedStamp);
if (findStamp != -1) {
curAtts = curAtts.replace(clickedStamp+',','');
$(this).siblings('.addButton').attr('data-selected-slots', curAtts);
}
}
});
因为",
更改此内容:
curAtts = curAtts.replace(clickedStamp+',','');
与:
之类的东西if (curAtts.indexof(",") > 0) {
curAtts = curAtts.replace(clickedStamp+',','');
}else{
curAtts = curAtts.replace(clickedStamp,'');
}
希望它有帮助