Question

我想在选中该行的复选框后更改所选行的背景颜色。我正在使用淘汰赛js。，以下功能是点击该复选框。

 self.checkBoxChecked = function (data, event) {
                if (event.currentTarget.checked) {
                    self.EmailDetailsList.push(data);
                    $(this).toggleClass("highlight");
                } else {
                    self.EmailDetailsList.pop(data);
                }
                console.log(data);
                return true;
            };

请让我知道我是否正确行事。

Answer 1

这里没有足够的代码可以准确地说出你在做什么，但基本上没有，如果你正在使用淘汰赛，那么你做得不对。淘汰的想法是避免在代码中操纵DOM，如$（this）.toggleClass（＆＃34; highlight＆＃34;），而是设置viewmodel和你想要控制的DOM属性之间的绑定。然后你操纵你的viewmodel并让knockout完成它的工作。

对于这种类型的事情，您可能希望向数据添加属性，例如data.isSelected，使其成为可观察对象，并在您要添加的行的<tr>标记上：

data-bind="css: { 'highlight': isSelected }"

在复选框事件处理程序中，您将设置data.isSelected（true），并且knockout将在<tr>上设置highlight属性。

Answer 2

为此，我得到了一个解决方案，

 self.checkBoxChecked = function (data, event) {
            if (event.currentTarget.checked) {
                self.EmailDetailsList.push(data);
                event.currentTarget.parentElement.parentElement.className = 'highlightRow';
                self.isSelected(true);
            }
            else {
                self.EmailDetailsList.pop(data);
                event.currentTarget.parentElement.parentElement.className = '';
                self.isSelected(false);
            }
        console.log(data);
        return true;
    }

由于我将从我的html页面获取行信息，我将找到它的父根并为其添加一个类。这解决了我的问题。:)

使用jquery或javascript更改所选行的背景

2 个答案: