jquery assign Objektdaten zu id bestehenden

Question

Ich habe 4 div mit 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> 

Jetzt nehme ich 2 von 4 zu "Rasse" 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"); 
}); 

Wie kann Ich erstelle Objekte/var und verbinde die Werte mit den vorhandenen IDs, um sie zu vergleichen? So ähnlich?

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

Wie die Autos Höchstgeschwindigkeit Erhöhung (+10) I Taste Rennen schlagen jedes Mal machen und ihre Kraftstoff Abnahme (-10)? Auch, wie man das Auto mit Brennstoff = 0 entfernt/versteckt?

Answer 1

Diese Lösungsoption verwendet Datenelemente, um die TopSpeed ​​und den Kraftstoff mit jedem Auto zu verknüpfen.

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