javascript - 单击时如何选择(此)图像？

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>

Javascript:

    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;

您可以以优化的方式修改代码。不要每次都创建图像和文本元素。取而代之的是在 html 代码中添加 image 和文本 div，然后只需在单击图像时更改其内容即可。请参阅下面的 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