jquery assign object's data to existing id

Question

I have 4 div with ids: HTML:

<div id="car1">Car 1</div>
<div id="car2">Car 2</div>
<div id="car3">Car 3</div>
<div id="car4">Car 4</div>

<div class="leftCar"></div>
<div class="rightCar"></div>
<button id="button">Race</button>

Now I pick 2 out of 4 to "race" JS:

// choose a car to compare
$("#car1").on("click", function() {
    $("#car1").appendTo(".leftCar");
});

// choose the other car to compare
$("#car2").on("click", function() {
    $("#car2").appendTo(".rightCar");
});

How can I create objects/var and connect the values to the existing ids to compare them? Something like this?

var car1 = {"topSpeed":"100","fuel":"50"};
var car2 = {"topSpeed":"80","fuel":"90"};

How to make the cars' top speed increase (+10) every time I hit button Race and their fuel decrease (-10)? Also, how to remove/hide the car with fuel = 0?

You could use data attributes for those variables: developer.mozilla.org/en-US/docs/Learn/HTML/Howto/… — Taplar
– Taplar, Commented Aug 22, 2017 at 18:46
when you click on #car1, you can create a var car1 = {"topSpeed":"100","fuel":"50", "id": $(this).attr("id")}; — Gabriel Mesquita
– Gabriel Mesquita, Commented Aug 22, 2017 at 18:47
Thank you. How do let the machine know if car1 is the car in 1 of the comparing divs? — Viet
– Viet, Commented Aug 22, 2017 at 18:53

Taplar · Accepted Answer · 2017-08-22 19:12:05Z

1

This solution option uses data elements to associate the topSpeed and fuel with each car.

(function(){
  //get the race divs
  var $leftCar = $('.leftCar');
  var $rightCar = $('.rightCar');
  
  //move over any of the left cars
  $('.left-car').on('click', function(){
    if (!$leftCar.children().length) $leftCar.append(this);
  });

  //move over any of the right cars
  $('.right-car').on('click', function(){
    if (!$rightCar.children().length) $rightCar.append(this);
  });
  
  $('#race').on('click', function(){
    //only race if you have two contenders
    if ($leftCar.children().length && $rightCar.children().length) {
      var $car1 = $leftCar.children().eq(0);
      var $car2 = $rightCar.children().eq(0);
      
      //reduce the fuel
      $car1.data('fuel', $car1.data('fuel') - 10);
      $car2.data('fuel', $car2.data('fuel') - 10);
      
      //log the data to see the change
      console.log( $car1.data(), $car2.data() );
      
      //if either of them run out of fuel, remove them
      if ($car1.data('fuel') < 1) $car1.remove();
      if ($car2.data('fuel') < 1) $car2.remove();
    }
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="car1" class="left-car"  data-topspeed="100" data-fuel="60">Car 1</div>
<div id="car2" class="right-car" data-topspeed="90" data-fuel="70">Car 2</div>
<div id="car3" class="left-car"  data-topspeed="120" data-fuel="40">Car 3</div>
<div id="car4" class="right-car" data-topspeed="10" data-fuel="100">Car 4</div>

<hr>
<div class="leftCar"></div>
<div class="rightCar"></div>
<hr>
<button id="race">Race</button>

answered Aug 22, 2017 at 19:12

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Viet Over a year ago

Thank you, Taplar. This works! Is there a way I can store the date in an array-like object for each car?

Taplar Over a year ago

Why do you need an array? The data is stored on the dom node and thus is inherently contextual already.

Viet Over a year ago

I meant: is there a way I don't need to show the data of each car in the html file? I wonder if there's a way to declare the value/data of each car in my js file.

Taplar Over a year ago

Sure, you can set data fields on the elements using data(key, value) and then later you can get it with data(key)

Collectives™ on Stack Overflow

jquery assign object's data to existing id

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related