knockout.js 如何使用jQuery选择器选择任何div并访问其参数

dfddblmv 于 2022-11-10 发布在 jQuery

关注(0)|答案(1)|浏览(103)

我有下面的HTML代码，它使用knockout.js来填充div：

<span data-bind="foreach: $root.days">
      <div class="slider" data-bind="attr: { day: day}">
        <span data-bind="foreach: $root.segment">
          <div class='slider-segment' data-bind= "style: {left: left, 
width: width, backgroundColor: color}"></div>
          <div class='slider-button' data-bind= "style: {left: left}"></div>
        </span>
        <div class='slider-label' data-bind="text: day"></div>
      </div>
    </span>

这段代码和ko.js沿着创建了div，在chrome的检查模式下看起来像这样：

<div class="slider" data-bind="attr: { day: day}" day = mon>
.
.
.
<div class="slider" data-bind="attr: { day: day}" day = sun>

下面是ko.js函数：

self.updateclock = function() {
now = (new Date());
timenow = now.getHours() + (now.getMinutes() / 60);
today = days[now.getDay()];
self.datetime(today.toUpperCase() + " " + format_time(timenow));
console.log(today.toUpperCase() + " " + format_time(timenow));
var current_key = 0;
var sx = $(".slider[day=" + today + "]")[0].offsetLeft;
console.log(sx);
var y = $(".slider[day=" + today + "]")[0].offsetTop;
console.log(y);
var x1 = sx + slider_width * (timenow / 24.0);
console.log(x1);
var x2 = sx + slider_width * (schedule[today][current_key].start / 24.0);
console.log(x2);
var w = x1-x2;

我希望使用jQuerySelector选择任何div并访问其参数，
我是这样做的：

var sx = $(".slider[day=" + today + "]")[0].offsetLeft;

但是，这会产生错误：
temperaton.js：105未捕获类型错误：无法读取未定义的属性'offsetLeft'
在恒温器视图模型.self.updateclock（恒温器.js：105）
在恒温器视图模型自启动（恒温器js：90）
在恒温器处。js：166
如何正确地使用jQuery选择器来选择每个生成的div的属性？

knockout.js

来源：https://stackoverflow.com/questions/57828910/how-to-select-any-of-that-div-with-jquery-selector-and-access-its-parameters

1条答案

按热度按时间

exdqitrt1#

更新的答案

（根据评论更新答案）
如果您只想呈现特定日期的元素，我将在视图模型上创建一个函数：

function isToday(day) {
    var allDays = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
    var now = new Date(),
        timeNow = now.getHours() + (now.getMinutes() / 60),
        today = allDays[now.getDay()];

    return day === today;
}

然后，您所要做的就是使用此函数显示相应日期的timemarker div（使用visible绑定）。

<span data-bind="foreach: $root.days">
    <div class="slider">
        <span data-bind="foreach: $root.segment">
            <div class='slider-segment' data-bind= "style: {left: left, width: width, backgroundColor: color}"></div>
            <div class='slider-button' data-bind= "style: {left: left}"></div>
        </span>
        <div class='slider-label' data-bind="text: day"></div>
        <div id="timemarker" data-bind="style: {top: top, left: left, width: width}, visible: $parent.isToday(day)"></div>
    </div>
</span>

旧答案

一个自定义绑定处理程序就可以做到这一点：

ko.bindingHandlers.shadow = {
    update: function (element, valueAccessor) {
        var curDay = valueAccessor();
        var allDays = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
        var now = new Date(),
            timeNow = now.getHours() + (now.getMinutes() / 60),
            today = allDays[now.getDay()];

    if (curDay === today) {
        // this is today's div! Now you can do whatever with 'element'
    }
};

应用如下：

<span data-bind="foreach: $root.days">
    <div class="slider" data-bind="shadow: day">
        <span data-bind="foreach: $root.segment">
            <div class='slider-segment' data-bind= "style: {left: left, width: width, backgroundColor: color}"></div>
            <div class='slider-button' data-bind= "style: {left: left}"></div>
        </span>
        <div class='slider-label' data-bind="text: day"></div>
    </div>
</span>

根据您创建阴影的方式，您可能甚至不需要自定义绑定处理程序，但可以使用CSS/内联样式和默认的css或style绑定来使其工作。
另外，就像评论中提到的其他人一样，div元素在技术上不应该进入span元素的内部。内联元素不应该包含块级元素。

赞(0）回复(0）举报 2022-11-10

我来回答

knockout.js 如何使用jQuery选择器选择任何div并访问其参数

1条答案

更新的答案

旧答案

相关问题

热门标签

最新问答