商店IMG和其他分區顯示它的點擊

Question

我努力做到以下幾點：

• 如果用戶點擊img，該圖像應顯示在另一個佔位符格並給它一個通過添加類「佔用」，最好是點擊邊界。

• 我得到這個與背景顏色屬性（1-9行），但是，我不能拿出一個解決方案，如果我對圖片做同樣的事情，我已經嘗試使用img標籤，然後我曾嘗試將img作爲背景放在div中，甚至嘗試將它插入點擊佔位符。

• 我想讓代碼檢查佔位符div是否爲空或'已佔用'，如果爲空，請將其放置在內部，如果沒有，則將其置於下一個空佔位符div中。

理想情況下，類似於1-9行的解決方案是我想要的。

這裏就是我被困筆：

​​

http://codepen.io/damianocel/pen/gawmeY

非常感謝您

Answer 1

你可以嘗試像

$(document).ready(function() { 
 
    var paint, 
 
    $img; 
 
    $(".color").click(function() { 
 
    paint = $(this).css('background-color'); 
 
    $img = undefined; 
 
    }) 
 
    $('.gallery').on('click', 'div', function() { 
 
    $img = $(this).clone(); 
 
    paint = undefined; 
 
    }); 
 

 
    $('.wrap .insert').click(function() { 
 
    $(this).css("border-color", paint); 
 
    }); 
 
    $('.wrap').on('click', '.insert:not(.occupied)', function() { 
 
    if ($img) { 
 
     $(this).append($img).addClass('occupied'); 
 
     $img = undefined; 
 
    } 
 
    }); 
 

 
}); 
 

 

 
$(document).ready(function() { 
 
    function randomColor() { 
 
    return '#' + ('000000' + Math.floor(Math.random() * 16777216).toString(16)).slice(-6); 
 
    }; 
 

 
    $("h1").click(function() { 
 
    $('body').css('background', randomColor()); 
 
    }); 
 
})

.wrap { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-align-content: stretch; 
 
    -ms-flex-line-pack: stretch; 
 
    align-content: stretch; 
 
    -webkit-align-items: flex-start; 
 
    -ms-flex-align: start; 
 
    align-items: flex-start; 
 
    ; 
 
    height: 100px; 
 
    width: 100p5; 
 
    border: 1px solid grey; 
 
} 
 
.insert { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid grey; 
 
} 
 
#one { 
 
    background-color: blue; 
 
    float: left; 
 
} 
 
#two { 
 
    background-color: red; 
 
    float: left; 
 
} 
 
#three { 
 
    background: green; 
 
    float: left; 
 
} 
 
.gallery>div { 
 
    display: inline-block; 
 
} 
 
.gal1 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: url("https://i.kinja-img.com/gawker-media/image/upload/s--_KjrmVSk--/c_fill,fl_progressive,g_north,h_358,q_80,w_636/19c12pvu8o9sljpg.jpg"); 
 
} 
 
.gal2 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: url(http://www.purple-planet.com/communities/5/004/012/574/565//images/4608142514_255x230.jpg); 
 
} 
 
.gal3 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: url("http://image.shutterstock.com/display_pic_with_logo/892819/164734181/stock-vector-glossy-planets-colorful-vector-set-on-dark-sky-background-164734181.jpg"); 
 
} 
 
.occupied { 
 
    border: 3px pink solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="random_background"> 
 
    <h1>click</h1> 
 

 
    <div class="color" id="one">blue</div> 
 
    <div class="color" id="two">red</div> 
 
    <div class="color" id="three">green</div> 
 
    <div class="wrap"> 
 
    <div class="insert"></div> 
 
    <div class="insert"></div> 
 
    <div class="insert"></div> 
 
    </div> 
 
    <div class="gallery"> 
 
    <div class="gal1"></div> 
 
    <div class="gal2"></div> 
 
    <div class="gal3"></div> 
 
    </div> 
 
    </footer> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
</div>