找到适当的DOM元素
找到适当的DOM元素
提问于 2016-08-17 16:16:38
下面是我的模型：
<!-- ko foreach: teamMembers -->
<tr>
<!-- ko foreach: days -->
<td>
<!-- ko foreach: shifts -->
<input type="text" data-bind="value: startTime">
<input type="text" data-bind="value: endTime">
<!-- /ko -->
</td>
<!-- /ko -->
</tr>
<!-- /ko -->我的视图模型：
function TimeCardViewModel() {
var self = this;
self.teamMembers=ko.observableArray();
}
function TeamMemberViewModel(data){
var self=this;
self.days=ko.observableArray();
for (var i=0; i<7; i++) {
self.days.push(new DayViewModel(...);
}
}
function DayViewModel(shifts){
var self=this;
self.shifts=ko.observableArray();
for (var i=0; i<shifts.length; i++) {
self.shifts.push(new ShiftElementsViewModel(...);
}
}
function ShiftElementsViewModel(a,b,c,d) {
var self=this;
self.startTime=ko.observable(a);
self.endTime=ko.observable(b);
}
var timeCardViewModel=new TimeCardViewModel();
ko.applyBindings(timeCardViewModel);对于每个成员，我们(一周中的每一天的每一天)都有一些轮班。对于每一个班次，我们都有一对开始时间结束时间的输入。就视觉结果而言，有些行包含成员的所有每周轮班，并且可能是每个成员每天多班的情况。如果我们看看专栏，这些包括所有成员在某一天的所有轮班。
我最大的问题是，每当在endTime的DOM元素上出现一个endTime事件时，我都希望将重点放在startTime 垂直的DOM元素上。例如，如果我们在周一，而第一个成员有两个移位，那么当第一个换班的startTime发生在第一个成员的endTime上时，我想把重点放在第一个成员的第二个换档的startTime上，当第一个成员的第二个换班的endTime出现模糊时，第二个成员的第一个换班的startTime就集中在第一个成员的第二个换档的endTime上。星期二等也是一样，我怎样才能做到呢？目前，光标是水平运动的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-22 07:12:51
这应该对你有用..。
jQuery(function($) {
$('body').on("blur", "input[data-bind*='value: endTime']", function() {
var
$t = $(this), // Current input
$td = $t.closest('td'), // Current input's parent td
i = $td.find('input[data-bind*="value: endTime"]').index($t), // Index of current input = current shift index
$target = $td.find('input[data-bind*="value: startTime"]').eq(i + 1); // Target is current shift + 1
if ($target.length) {
$target.focus();
}
});
});其思想是将事件处理程序绑定到在value: endTime属性中包含data-bind的每个输入的模糊事件。
如果这个处理程序，我们在天中找出endTime输入的索引，将1添加到其中，并将startTime输入与该索引集中在同一个td ( day )中。
由于元素在加载文档后不存在(但由剔除)，因此我们将处理程序绑定到input[data-bind*='value: endTime']所选择的输入体。
Stack Overflow用户
发布于 2016-08-17 18:03:43
在这里，我将通过使用所有的knockout向您展示其中一种方法。它向您展示了如何实现您的数据示例的逻辑，因为我没有您的数据示例，您可能需要根据您的数据修改它。
工作示例：https://jsfiddle.net/kyr6w2x3/48/
HTML:
<table>
<tbody>
<!-- ko foreach: teamMembers -->
<tr>
<td data-bind="text:name"></td>
<!-- ko foreach: days -->
<td>
<h4 data-bind="text:name"></h4>
<input type="text" data-bind="value: startTime ,hasFocus :getFocus">
<input type="text" data-bind="value: endTime ,event:{blur: $root.endTimeBlur}">
</td>
<!-- /ko -->
</tr>
<!-- /ko -->
</tbody>
</table>JS:
var data ={
teamMembers: [{
Name: "Member A",
id:1,
days: [{startTime: '8:00',endTime: "4:00" ,name:'Monday',parentId:1},{startTime: '8:00',endTime: "4:00",name:'Tuesday',parentId:1},{startTime: '8:00',endTime: "4:00",name:'Wednesday',parentId:1},{startTime: '8:00',endTime: "4:00",name:'Thursday',parentId:1},{startTime: '8:00',endTime: "4:00",name:'Friday',parentId:1},{startTime: '8:00',endTime: "4:00",name:'Saturday',parentId:1},{startTime: '8:00',endTime: "4:00",name:'Sunday',parentId:1}]
},
{
Name: "Member B",
id:2,
days: [{startTime: '8:00',endTime: "4:00" ,name:'Monday' ,parentId:2},{startTime: '8:00',endTime: "4:00",name:'Tuesday' ,parentId:2},{startTime: '8:00',endTime: "4:00",name:'Wednesday',parentId:2},{startTime: '8:00',endTime: "4:00",name:'Thursday',parentId:2},{startTime: '8:00',endTime: "4:00",name:'Friday',parentId:2},{startTime: '8:00',endTime: "4:00",name:'Saturday',parentId:2},{startTime: '8:00',endTime: "4:00",name:'Sunday',parentId:2}]
},
{
Name: "Member C",
id:3,
days: [{startTime: '8:00',endTime: "4:00" ,name:'Monday',parentId:3},{startTime: '8:00',endTime: "4:00",name:'Tuesday',parentId:3},{startTime: '8:00',endTime: "4:00",name:'Wednesday',parentId:3},{startTime: '8:00',endTime: "4:00",name:'Thursday',parentId:3},{startTime: '8:00',endTime: "4:00",name:'Friday',parentId:3},{startTime: '8:00',endTime: "4:00",name:'Saturday',parentId:3},{startTime: '8:00',endTime: "4:00",name:'Sunday',parentId:3}]
},]
}
var memberViewModel = function(data) {
var self = this ;
self.days = ko.observableArray([]);
self.name = ko.observable(data.Name);
self.id = ko.observable(data.id);
self.days($.map(data.days, function (item) {
return new daysViewModel(item);
}));
}
var daysViewModel = function (data){
var self = this ;
self.getFocus = ko.observable(false);
self.startTime = ko.observable(data.startTime);
self.endTime = ko.observable(data.endTime);
self.name = ko.observable(data.name)
self.parentId = ko.observable(data.parentId);
}
function ViewModel() {
var self = this;
self.teamMembers = ko.observableArray([]);
self.teamMembers($.map(data.teamMembers, function (item) {
return new memberViewModel(item);
}));
self.endTimeBlur = function(data){
ko.utils.arrayFirst(self.teamMembers(), function (item,i) {
if (item.id() == data.parentId() && self.teamMembers()[i+1] ) {
//here you set getFocus to true to make next member 's monday gets focus
self.teamMembers()[i+1].days()[0].getFocus(true);
return;
}
});
}
}
ko.applyBindings(new ViewModel());页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39001659
复制相关文章
相似问题
腾讯云开发者
