Question

我在数组中有要显示在div中的值，当我单击特定按钮时，两个数组值将交换它们的位置。但是我想在交换后为div添加不同的背景色。 我的示例代码是：

    $(document).ready(function(){ 
    var PlanetsModel = function() {
    self.Racer = ko.observableArray([
        { id: "Racer-101", rank: "5"},
        { id: "Racer-102", rank: "2"},
        { id: "Racer-103", rank: "1"},
        { id: "Racer-104", rank: "4"},
        { id: "Racer-105", rank: "7"},
        { id: "Racer-106", rank: "8"},
        { id: "Racer-107", rank: "9"},
        { id: "Racer-108", rank: "3"},
        { id: "Racer-109", rank: "6"}
    ]);

    console.log("First array : " + JSON.stringify(self.Racer()));

    this.hideElement = function() {
        function swap(data, x, y) {
            var target = document.getElementById('remove_elem'),
                getRacer = target.children[x];
                getRacer1 = target.children[y];
                console.log(getRacer);

                var temp = data[x];
                data[x] = data[y];
                data[y] = temp;
                console.log("swap values");

                if(self.Racer()[x].rank > self.Racer()[y].rank) {
                    console.log('first element is greater');
                    $('#first').removeClass('sample'); 
                    $('#first').addClass('highlight');
                } else {
                    console.log('second element is greater');
                    $('#first').removeClass('sample'); 
                    $('#first').addClass('remove');
                }
        }
        swap(self.Racer(), 1,3);
        self.Racer.valueHasMutated();
    }; 
    this.showRacer = ko.computed(function() {
       return self.Racer();        
    }, this);
};
ko.applyBindings(new PlanetsModel());
});

我的html代码：

<button id='swap' data-bind='click: hideElement'>Swap Values</button>

<div id='remove_elem' data-bind='template: { foreach: showRacer }'>
    <div style="width: 50%;" data-bind='attr: { "class": "planet "}'>
        <div class="left" data-bind='text: id'></div>
        <div class="right" data-bind='text: rank'></div>
        <span id="first" class="sample">xxx</span>

    </div>
</div>

这是我的示例代码，单击按钮时它将交换值。但它只会在数组的第一个元素中添加颜色。我的代码有什么问题？。

Answer 1

您始终在更改ID为first的div的值。

id必须是唯一的，因此其他所有ID为first的ID均不得更改，因为jquery在找到您要查找的第一个元素后停止搜索其他元素。

您应该在ID中添加一些内容，使其对该赛车手具有唯一性，例如使div的ID与赛车手的ID相同。例如：data-bind='attr: { "id": "id"}（其中第二个ID是Racer对象的ID）。

然后您通过调用与该Racer对象相关的相同ID（例如$("#"+racer[x].id)

）在JavaScript中再次引用它

如果我正确理解了您对数据绑定代码的使用，那么更新代码应如下所示。

<button id='swap' data-bind='click: hideElement'>Swap Values</button>

<div id='remove_elem' data-bind='template: { foreach: showRacer }'>
    <div style="width: 50%;" data-bind='attr: { "class": "planet "}'>
        <div class="left" data-bind='text: id'></div>
        <div class="right" data-bind='text: rank'></div>
        <span data-bind='attr: {"id": "id" }' class="sample">xxx</span>

    </div>
</div>

和javascript可以这样更新：

if(self.Racer()[x].rank > self.Racer()[y].rank) {
    console.log('first element is greater');
    $('#'+self.Racer()[x].id).removeClass('sample'); 
    $('#'+self.Racer()[x].id).addClass('highlight');
} else {
    console.log('second element is greater');
    $('#'+self.Racer()[y].id).removeClass('sample'); 
    $('#'+self.Racer()[y].id).addClass('remove');
}

使用if条件使用javascript / jquery在返回值中添加类？

1 个答案: