gpt4 book ai didi

javascript - 更改 "with"属性更改样式

转载 作者:太空宇宙 更新时间:2023-11-04 00:18:41 25 4
gpt4 key购买 nike

我的 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 here .

现在的问题是,当您单击该按钮时,所有类别为“cell”的表格单元格的背景颜色都应更改。但是,如果隐藏的 div 不可见,那么当它可见时,它的背景颜色仍然是白色。这样做的原因似乎是因为我正在更改包装隐藏单元格的“with”绑定(bind)中使用的属性。似乎当您更改与“with”绑定(bind)的属性时,它会重置其子项的样式。

(如果这没有意义,请在 jsFiddle 上执行此操作。单击按钮,然后单击“单击以打开”单元格。请注意,“元素 2”未突出显示。再次单击按钮,它将突出显示。现在再次单击“单击以打开”单元格,注意“元素 2”不再突出显示。现在删除在显示功能中设置“someProperty”的行并重复实验。“元素 1”现在正确突出显示无论当您单击颜色单元格按钮时它是否可见)

这是设计使然吗?有没有办法解决这个问题,以便更改“with”使用的属性不会重置样式?

最佳答案

恕我直言,解决这个问题的正确方法是将颜色也作为可观察对象,可以在单击按钮时更改。我有更新jsfiddle here

关于javascript - 更改 "with"属性更改样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10143670/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com