Wsrtjtyk

I have values in an array to display in a div, when I click on a particular button, two array values will swap their positions. But I want to add different background color to the div after swaping..
My sample code is :

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

});

my html code:

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

This is my sample code, it will swap values when the button is clicked. but it's adding color in the first element of the array only.
what is the problem in my code ?.

You are always changing the value of the div with id first.

id's have to be unique and so none of the other ones with the id of first are changing because jquery stops searching for others after it finds the first element you're looking for.

You should add something to the id that makes it unique to that racer, like making the id of the div the same as the id of the racer. for instance: data-bind='attr: { "id": "id"} (where the second id is the id of the racer object).

then you reference it again in your javascript by calling the same id related to that racer object like $("#"+racer[x].id)

Updating your code it should look like this, if I'm understanding your use of data-binding code correctly.

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

and javascript can be updated like this:

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

}