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

我有一个数组中的值要显示在一个div中，当我单击一个特定的按钮时，两个数组值将交换它们的位置。但是我想在swap之后为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());
});

<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>

我的html代码：

    $(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());
});

<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>

交换值
xxx

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

---

我的代码有什么问题？

您总是先用id

更改div的值

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

您应该在id中添加一些使其对该车手唯一的内容，例如使div的id与车手的id相同。例如：
data bind='attr:{“id”：“id”}
（其中第二个id是racer对象的id）

然后在javascript中再次引用它，方法是调用与racer对象相关的相同id，如
$（“#”+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>

你的HTML是什么？你可以发布一个完整的例子吗？如果没有你在
if..else
中的HTML标记，我什么都做不了。你总是在同一个元素中删除/添加一个类（
#first
）。我想删除类#first，并为同一个div为特定的交换值添加不同的类。怎么可能..我在代码中添加了$（'#first'+self.Racer（）[y].rank），行中没有其他颜色变化..@NewUSer我更新了一点答案，尝试使用id并通过浏览器调试器检查呈现的html，以确保id值按预期设置，因为我不确定数据绑定库的工作方式，因此我的示例可能不是100%正确，因为syntaxI应该删除id data bind='attr:{“id”：id}'中的引号，它应该对一个值执行颜色更改。。我想更改两个交换值的颜色。然后我想这取决于
if
和
else
块中的内容。您需要添加类来更改每个要更改突出显示的div的突出显示，但是在“if”块中，您将有
$（'#'+self.Racer（）[x].id）
和
$（'#'+self.Racer（）[y].id）
，在该块中您可以将它们的类更改为突出显示它们的任何类。我在理解你的英语和你现在在这些评论中真正想要的东西方面有点困难。这个例子将正确地工作。我将只在onlyif和else语句中添加一个类。我的代码中存在问题。我将在if和else语句中添加$（'#'+self.Racer（）[x].id）和$（'#'+self.Racer（）[y].id）中的两个类。他们应该表现正确