이미지를 클릭하면 어떻게 선택합니까?

Question

나는 클릭 할 때 다른 위치로 복사하고 싶은 이미지가 있습니다. 그리고 직접 소스를 가하는 대신 여러 개의 이미지가있는 특정 클릭 이미지를 선택하고 싶습니다.

나는 또한 클릭 한 개체 (제목, 등급 등)의 텍스트를 추가하는 데 어려움을 겪고 있습니다. 내 JS 코드의 물음표는 내가 어려움을 겪고있는 것을 강조합니다.

JS Fiddle 내가 설명하려고하는 것을 이해합니다. 죄송합니다 CSS에 대해.

더 큰 사이트/앱을 만들고 개체를 사용하여 새로운 방식으로 새로운 도움말을 만들거나 올바른 방향으로 나아가는 단계에 정말 감사드립니다. 만약 내가 그것에 대해 잘못 가고 있다면 알려주세요.

HTML :

<header> 
      <h1> Playstation 4 Games </h1> 
</header> 
     <div id = 'selectionContainer'> </div> 
    <div id = 'gamesContainer'> 
      <ul> 
       <li> <img src='http://s18.postimg.org/dyrfzmbsp/callofdutyadvancedwarfareboxart1.jpg' class='gameCover' id='codImage'> </li> 
       <li> <img src='http://s1.postimg.org/64gqkaoqn/13741695334_e2f461ca7a.jpg' class='gameCover' id='theLastOfUsImage'> </li> 
       <li> <img src='http://s13.postimg.org/ovz0ll0kn/fifa_15_cover_ps4.jpg' class='gameCover' id='fifaImage'> </li> 
       <li> <img src='http://s15.postimg.org/agb7y3qej/ass_creed_ps4_box_70305_1405370733_1280_1280_jp.jpg' class='gameCover'> </li> 
      </ul> 
     </div> 

자바 스크립트 :

function game(theTitle, theGenre, theIGNRating, theDescription) { 
    this.gameTitle = theTitle; 
    this.genre = theGenre; 
    this.rating = theIGNRating; 
    this.gameDescription = theDescription; 

    this.showGame = function() { 
    return 'Title: ' + this.gameTitle + 'Genre: ' + this.genre + 'IGN Rating: ' + this.rating + 'Description: ' + this.gameDescription; 

    } 
} 

var callOfDuty = new game('Call of Duty Advanced Warefare', 'First Person Shooter', '9.1/10', 'Call of Duty: Advanced Warfare envisions the powerful battlegrounds of the future, where both technology and tactic have evolved to usher in a new era of combat for the franchise.'); 

var theLastOfUs = new game('The Last Of Us Remastered', 'Action', '10/10', 'Survive an apocalypse on Earth in The Last of Us. Here, you will find abandoned cities reclaimed by nature. Here is a population decimated by a modern plague. Here, there are only survivors killing each other for food, weapons, or whatever they can get their hands on. Here, you find no hope.') 

var fifa15 = new game('FIFA 15', 'Sports', '8.3', 'FIFA 15 brings football to life in stunning detail so fans can experience the emotion of the sport like never before. ') 

var assasinsCreed = new game('Assassins Creed Unity', 'Action', '7.8', 'Set in a once-magnificent Paris, Assassin’s Creed Unity plunges into the terror of the 1789 French Revolution and features the most dense and immersive Assassin’s Creed city ever created. Through the streets of Paris, the starving inhabitants are set to take up arms for freedom and equality. In this time of chaos and brutality, a young man named Arno, wounded by the loss of those he loved, sets on a deadly path of redemption.') 

// Clicking a game cover brings it up to the main container 

$('.gameCover').click(function() { 
    var sourceImage = document.createElement('img'); 
     sourceImage.className = 'gameCoverFocus'; 
     //How can you select the image that is clicked? 
     // This.img????????????? 
     sourceImage.src = '??????'; 
    var theDiv = document.getElementById('selectionContainer'); 
     theDiv.appendChild(sourceImage); 

    // Remove click event after clicking once 

    $('.gameCover').off('click'); 
    // Creating and appending the text from object. 
    var textDiv = document.createElement('div'); 
     textDiv.className = 'textDiv'; 

    // How to select object of image clicked???????????? 

textDiv.appendChild(document.createTextNode(callOfDuty.showGame())); 
    document.body.appendChild(textDiv); 

}); 

Answer 1

당신은 this.src 또는 $(this).prop('src')

//How can you select the image that is clicked? 
     // This.img????????????? 
     sourceImage.src = this.src; 

당신은 최적화 된 방식으로 코드를 수정할 수 있습니다 사용할 수 있습니다. 매번 이미지와 텍스트 요소를 만들지 마십시오. 이 대신에 image 및 텍스트 div을 html 코드에 추가하고 이미지 클릭으로 내용을 변경하십시오. html 및 jquery를 참조하십시오.

는 HTML :

<div id = 'selectionContainer'> 
    <img src="" class="gameCoverFocus"></img> 
</div> 

<div id="text"></div> 

jQuery를 : 당신은 이미지를 클릭하면 .off("click")를 호출 할 필요가 없습니다. .one("click")을 사용하면 각 이미지가 한 번만 클릭되도록 할 수 있습니다.

$('.gameCover').one("click",function() { 
    $('#selectionContainer img').prop('src',this.src); 
    $('#text').html(document.createTextNode(callOfDuty.showGame())); 
}); 

DEMO