javascript - 在点击时选择列表中的项目

当我单击它时，我试图对li标记的css类进行调整。

我有这个:

模型:

var businessUnitsModel = {
    businessUnitsList: ko.observableArray([
        { siteID: "a", title: "business1" },
        { siteID: "b", title: "business2" },
        { siteID: "c", title: "business3" },
        { siteID: "d", title: "business4" }]),
    currentSelected: ko.observable(),
    selectItem: function (site) { this.currentSelected(site.siteID); }
}

//overall viewModel
var viewModel = {
    businessUnits: businessUnitsModel,
};

的HTML

<ul class="modal-list" data-bind="'foreach': businessUnits.businessUnitsList">
    <li class="filterItem" data-bind="'text': title,
        css: { 'filterItemSelect': siteID === $parent.currentSelected },
        'click': $parent.selectItem">
    </li>
</ul>

的CSS

.filterItemSelect {
    color:#0069ab;
}

我不明白为什么它不起作用。

最佳答案

这就是您要寻找的:

JS:

var businessUnitsModel = {
    businessUnitsList: ko.observableArray([{
        siteID: "a",
        title: "business1"
    }, {
        siteID: "b",
        title: "business2"
    }, {
        siteID: "c",
        title: "business3"
    }, {
        siteID: "d",
        title: "business4"
    }]),
    currentSelected: ko.observable(),
    selectItem: function (that, site) {
        that.currentSelected(site.siteID);
    }
}

//overall viewModel
var viewModel = {
    businessUnits: businessUnitsModel,
};

ko.applyBindings(viewModel);

查看:

<div data-bind="with :businessUnits">
    <ul class="modal-list" data-bind="'foreach': businessUnitsList">
        <li class="filterItem" data-bind="'text': title,
        css: { 'filterItemSelect': siteID === $parent.currentSelected() },
        'click': function(){$parent.selectItem($parent, $data);}"></li>
    </ul>
</div>

See fiddle

希望对您有所帮助。

关于javascript - 在点击时选择列表中的项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17344935/