更改“ with”屬性會更改樣式

Question

我有看起來像這樣的html：

<div>
    <table>
        <tr onclick="show();">
            <td class="cell">Click to open</td>
        </tr>
    </table>
</div>
<div style="display:none; position:absolute; left:150px" id="hiddenDiv">
    <table data-bind="with: someProperty">
        <tr onclick="hide();">
            <td class="cell" data-bind="text:message"></td>
        </tr>
    </table>
</div>
<input type="button" value="Color cells" onclick="colorCells()" />

我的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。

現在的問題是，當您單擊按鈕時，所有具有“ cell”類的表單元格的背景色都應該更改。 但是，如果隱藏的div不可見，則將其設為可見時，其背景顏色仍為白色。 造成這種情況的原因似乎是因為我正在更改包裝隱藏單元格的“ with”綁定中使用的屬性。 似乎當您更改與“ with”綁定的屬性時，它會為其子項重置樣式。

（如果沒有任何意義，請在jsFiddle上執行此操作。單擊按鈕，然后單擊“單擊以打開”單元格。請注意，“項目2”未突出顯示。再次單擊按鈕將其突出顯示。現在再次單擊“單擊以打開”單元，請注意“項目2”不再突出顯示。現在刪除在show函數中設置“ someProperty”的行並重復實驗。無論是否是否正確突出顯示“項目1”單擊顏色單元按鈕時是否可見）

這是設計使然嗎？ 有沒有一種解決方法，使更改“ with”使用的屬性不會重置樣式？

Answer 1

解決此問題的正確方法，恕我直言，將顏色也設置為可觀察到的顏色，可以在單擊按鈕時更改顏色。 我在這里有更新jsfiddle

Answer 2

而不是更改css類，請嘗試更改單元格的類，而不是css類“ cell”本身，請參閱是否起作用？