单击时如何选择（此）图像？

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