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

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 的其他元素都不会发生变化，因为 jquery 在找到您要查找的第一个元素后会停止搜索其他元素。

您应该向 id 添加一些内容，使其对于该赛车手来说是唯一的，例如使 div 的 id 与赛车手的 id 相同。例如:data-bind='attr: { "id": "id"}(其中第二个 id 是 racer 对象的 id)。

然后您通过调用与该赛车手对象相关的同一 ID 在您的 JavaScript 中再次引用它，例如 $("#"+racer[x].id)

如果我正确理解您对数据绑定(bind)代码的使用，更新您的代码应该如下所示。

<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');
}