Neu bei der Programmierung und Probleme mit jQuery Click Event

Ich starte das durch die Generierung von 4 Zeichen in meiner Startspiel-Funktion und schickte sie an meine Character Div. Dann muss ich auf einen der 4 klicken (Vader, Stormtrooper, Luke oder Yoda). Wenn ich auf einen der 4 klicke, werden die anderen 3 aus diesem Div ziehen und zu den Feinden available div gehen. Während der, den ich angeklickt habe, bleibt in der Charakter-Div. Ich kann nicht herausfinden, wie ich das erreichen kann. Ich habe erst seit 4 Wochen programmiert. mein CodeNeu bei der Programmierung und Probleme mit jQuery Click Event

 
 
    var characters = [{ 
 
      name: "DarthVader", 
 
      health: 120, 
 
      attack: 8, 
 
      enemyattackback: 15, 
 
      imgURL: "assests/images/darth_vader.jpg" 
 
     }, 
 
    
 
     { 
 
      name: "StormTrooper", 
 
      health: 100, 
 
      attack: 14, 
 
      enemyattackback: 5, 
 
      imgURL: "assests/images/stormtrooper.jpg" 
 
     }, 
 
    
 
     { 
 
      name: "LukeSkywalker", 
 
      health: 150, 
 
      attack: 8, 
 
      enemyattackback: 20, 
 
      imgURL: "assests/images/Luke_Skywalker.jpg" 
 
    
 
     }, 
 
    
 
     { 
 
      name: "Yoda", 
 
      health: 180, 
 
      attack: 7, 
 
      enemyattackback: 20, 
 
      imgURL: "assests/images/yoda.jpg" 
 
     } 
 
    ]; 
 
    var selectedCharacter; 
 
    var enemys = []; 
 
    var figheter; 
 
    var yoda 
 
    
 
    console.log(yoda) 
 
    console.log(characters[0]); 
 
    console.log(characters[1]); 
 
    console.log(characters[2]); 
 
    console.log(characters[3]); 
 
    
 
    // start the game with a loop that sends the 4 character in the object to a div 
 
    $(document).ready(function() { 
 
    
 
     function startgame() { 
 
      $.each(characters, function(index, character) { 
 
       var characterDiv = $('<div>').addClass('character'); 
 
       var characterName = $('<p>').addClass("character-name").text(character.name); 
 
       var characterImg = $("<img>").addClass("character-img").attr('src', 
 
        character.imgURL);; 
 
       var characterHealth = $('<p>').addClass('character-health').text(character.health); 
 
       characterDiv.append(characterName, characterImg, characterHealth).appendTo('.Character') 
 
      }) 
 
     } 
 
     startgame() 
 
    
 
    
 
     
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    
 
    
 
    <body> 
 
     <div class="row"> 
 
      <div class="col-md-10"> 
 
       <div class="page header"> 
 
        <div class="pull-right"> 
 
         <h1><strong>Star Wars RPG</strong></h1> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="Character"> 
 
        <div class="col-md-4"> 
 
         <h2><strong>Your Character</strong></h2> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <br> 
 
      <br> 
 
      <br> 
 
      <br> 
 
      <div class="row"> 
 
       <div class="enemiesavailable"> 
 
        <div class="col-md-6" id="attack"> 
 
         <h3>Enemies Available to Attack</h3> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="fighter"> 
 
        <div class="col-md-6" id="fight"> 
 
         <h4>Fight Section</h4> 
 
         <button type="button" class="btn btn-primary btn-xs">attack</button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-md-6"> 
 
        <h5>Defender</h5> 
 
       </div> 
 
      </div> 
 
      <script type="text/javascript " src="assests/javascript/java.js "></script> 
 
    
 

 
Jquery

Quelle

2017-02-24 willis

// Cache the DOM first 
 
const pony = document.querySelector('#pony') 
 
// Add a event listener to the #pony element 
 

 
// Tell JavaScript the event will be a click event 
 
pony.addEventListener('click', e => { 
 
    // Then the user click on the pony element, this callback will be fire up 
 
    
 
    // Just console log out the silly message I got ¯\_(ツ)_/¯ 
 
    console.log('You just click a pony :P') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<img id='pony' src='https://s-media-cache-ak0.pinimg.com/originals/63/e9/c1/63e9c1df1e897de2386e31180b9a21b6.jpg' />

Quelle

2017-02-24 03:49:53

Neu bei der Programmierung und Probleme mit jQuery Click Event

Antwort

Verwandte Themen