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

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

1 个答案: