使用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 是賽車對象的 id）。

然后您通過調用與該 Racer 對象相關的相同 id 再次在您的 javascript 中引用它，例如$("#"+racer[x].id)

如果我正確理解您對數據綁定代碼的使用，則更新您的代碼應該如下所示。

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