更改“with”属性更改样式

我有html看起来像这样：

 
 
 
Click to open
 
 
 
 
  
  

我的JavaScript看起来像这样：

  function show() { vm.someProperty(vm.list[1]); $("#hiddenDiv").fadeIn("slow"); } function hide() { $("#hiddenDiv").fadeOut("slow"); } function colorCells() { $(".cell").css("background-color", "Yellow"); } function ViewModel() { this.list = [new SubModel("item 1"), new SubModel("item 2")]; this.someProperty = ko.observable(this.list[0]); } function SubModel(msg) { this.message = msg; } var vm = new ViewModel(); $(function () { ko.applyBindings(vm); }); 

我在这里设置了一个jsFiddle。

现在问题是，当您单击按钮时，所有具有“单元格”类的表格单元格应该更改其背景颜色。 但是，如果隐藏的div不可见，那么当它可见时，它的背景颜色仍然是白色。 原因似乎是因为我正在更改包含隐藏单元格的“with”绑定中使用的属性。 看来当你用“with”改变绑定属性时，它会重置它的子项的样式。

（如果没有意义，请在jsFiddle上执行此操作。单击按钮，然后单击“单击以打开”单元格。请注意，“项目2”未突出显示。再次单击该按钮，它将突出显示。再次单击“单击打开”单元格，注意“项目2”不再突出显示。现在删除在show函数中设置“someProperty”的行并重复实验。“item 1”现在无论是否正确突出显示或者单击颜色单元格按钮时可见

这是设计的吗？ 有没有办法解决它，以便更改“with”使用的属性不会重置样式？

Answer 1

解决这个问题的正确方法，恕我直言，将颜色也作为一个可观察的颜色，可以通过点击按钮更改。 我在这里有更新jsfiddle

Answer 2

而不是改变css类，尝试改变单元格的类而不是css类’cell’本身，看看是否有效？