knockout.js 如何在knockoutjs中更改onClick按钮

rjzwgtxy 于 2022-11-10 发布在其他

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

我有一个带有一些css：

<label class="label-checkbox">
    <input type="checkbox" data-bind="click: clickedMultipleServicesButton, checked: checkedMultipleServicesButton, css: {checked: true}">

    <span style="font-size:14px !important">Test Button</span>
</label>
<style>
    label.label-checkbox {
        cursor: pointer;
    }

    label.label-checkbox input {
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
        pointer-events: none;
    }

    label.label-checkbox span {
        padding: 8px 11px;
        border: 1px solid #ccc;
        display: inline-block;
        color: #ffffff;
        border-radius: 6px;
        margin: 7px;
        background: #253965;
        user-select: none;
    }

    label.label-checkbox input:checked + span {
        box-shadow: inset 1px 2px 5px #777;
        transform: translateY(1px);
        background: #ffd800;
    }
</style>

当我删除数据绑定时，它会工作。点击它时，蓝色按钮会变成黄色，反之亦然。
但是，当我添加数据绑定时：click它不再工作了。我假设我需要在单击事件上动态地附加css类？
期望的行为：我想有data-bind="click: someFunction"，但当我点击，有css的行为，并有函数，将捕捉什么时候是按钮选中，什么时候不是。

knockout.js

来源：https://stackoverflow.com/questions/69559465/how-to-change-onclick-button-in-knockoutjs

1条答案

按热度按时间

bq3bfh9z1#

是的，我不知道如何在knockout中操作伪类，但你可以动态添加和删除CSS类：

<label class="label-checkbox" >
        <input type="checkbox" data-bind="click: clickedMultipleServicesButton, css: checkedMultipleServicesButton() && 'checked'"/>

        <span style="font-size:14px !important">Test Button</span>
    </label>
    <style>
        label.label-checkbox {
            cursor: pointer;
        }

            label.label-checkbox input {
                position: absolute;
                top: 0;
                left: 0;
                visibility: hidden;
                pointer-events: none;
            }

            label.label-checkbox span {
                padding: 8px 11px;
                border: 1px solid #ccc;
                display: inline-block;
                color: #ffffff;
                border-radius: 6px;
                margin: 7px;
                background: #253965;
                user-select: none;
            }

            label.label-checkbox input.checked + span {
                box-shadow: inset 1px 2px 5px #777;
                transform: translateY(1px);
                background: #ffd800;
            }
    </style>

请注意，我将您的input:checked转换为input.checked。
视图模型中的代码：

self.checkedMultipleServicesButton = ko.observable(false);
self.clickedMultipleServicesButton = function (e) {      
  self.checkedMultipleServicesButton(!self.checkedMultipleServicesButton());
}

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

我来回答

knockout.js 如何在knockoutjs中更改onClick按钮

1条答案

相关问题

热门标签

最新问答