knockout.js 将大纲添加到具有相同类名且彼此绑定的分组按钮

r9f1avp5  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(119)

我有一个父View模型:

var monthVM = function (mData) {
this.Id = mData.Id;
this.Name = mData.Name;
if (mData.Days != null) {
        $.each(mData.Days, function (index, item) {
            var newDay = new dayVM(item, index);
            this.Days.push(newDay );
        });
    }
}

dayVM

var dayVM= function (dData, index) {
    this.Id=dData.Id;
    this.Mon = ko.observable(dData.Mon);
    this.Tue = ko.observable(dData.Tue);
    this.Wed = ko.observable(dData.Wed);
    this.Thu = ko.observable(dData.Thu);
    this.Fri = ko.observable(dData.Fri);
    this.Sat = ko.observable(dData.Sat);
    this.Sun = ko.observable(dData.Sun);

    this.didOnMon = function (item) {       
        if (item.Mon() == false) item.Mon(true);
        else item.Mon(false);
        //other stuff
    }
    this.didOnTue = function (item) {       
        if (item.Tue() == false) item.Tue(true);
        else item.Tue(false);
        //other stuff
    }
}

HTML绑定

<div class="row">
   <div class="col-9 btn-group">
        <button data-bind="css: Mon() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeMon">Mon</button>
        <button data-bind="css: Tue() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeTue">Tue</button>
        <button data-bind="css: Wed() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeWed">Wed</button>
        <button data-bind="css: Thu() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeThu">Thu</button>
        <button data-bind="css: Fri() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeFri">Fri</button> div
        <button data-bind="css: Sat() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeSat">Sat</button>
        <button data-bind="css: Sun() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeSun">Sun</button>
   </div>
</div>

我需要添加一个边框,如将深色按钮分组,一个挨着一个,但仍保持设计:按钮填充col-9 div,如

每次其中一个按钮变白色时,它都应该为其他深色的按钮调整轮廓。
我试过用

.btn-dark-custom {
   outline: 1px solid black;
   outline-offset: 2px;
}

<button class="btn btn-dark btn-dark-custom" onclick="changeWed()">Wed</button>

但它为每个深色按钮绘制边框,而不是作为一个组。我也尝试过在JS中添加border行,但我无法添加偏移量。

jdzmm42g

jdzmm42g1#

在纯css中,这有点复杂,但这里有一种可能性(Jquery仅用于click类切换):
第一个

vxqlmq5t

vxqlmq5t2#

outline应用于整个元素,因此它将绘制在每个元素上。它绘制在元素的顶部,因此您无法隐藏它。使用outline属性创建的轮廓绘制在框的“上方”,即,轮廓始终在顶部,并且不影响框或任何其他框的位置或大小。ref

纯CSS解决方案您可以使用::before伪元素创建类似轮廓的效果:

第一个

可能的JavaScript解决方案您可以在CSS中将outline设置为.btn-group。每次用户切换按钮时,将所有黑色按钮分组到它们自己的.btn-group Package 器中。

例如,如果用户取消选择星期四和星期五,则DOM如下所示:
第一个
你可以编写javascript,使其在用户每次选择/取消选择一个按钮时都具有如上所述的结构。

yruzcnhs

yruzcnhs3#

尝试使用伪元素,如::before、::after。下面是一个示例:

.black-button {position: relative;}
.black-button::before {
    position: absolute;
    left: -2px;
    top: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid black;
}

相关问题