商店IMG和其他分区显示它的点击

问题描述：

我努力做到以下几点：商店IMG和其他分区显示它的点击

如果用户点击img，该图像应显示在另一个占位符格并给它一个通过添加类“占用”，最好是点击边界。
我得到这个与背景颜色属性（1-9行），但是，我不能拿出一个解决方案，如果我对图片做同样的事情，我已经尝试使用img标签，然后我曾尝试将img作为背景放在div中，甚至尝试将它插入点击占位符。
我想让代码检查占位符div是否为空或'已占用'，如果为空，请将其放置在内部，如果没有，则将其置于下一个空占位符div中。

理想情况下，类似于1-9行的解决方案是我想要的。

这里就是我被困笔：

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

非常感谢您

如果我多次点击同一图像会怎么样 –

http://jsfiddle.net/arunpjohny/o7tyfa3f/2/？ –

@阿伦。谢谢你，那是一个聪明的解决方案。如果用户点击一次图像两次，我认为为此目的，它不应该生成下一个图像，但我不知道做什么替代，所以这很好。然而，重置函数来清空占位符将会很有用。不是迂腐，但你如何将图像存储在点击变种，然后在点击占位符中显示它？顺便说一句，抱歉可怕的布局，它只是一个项目的练习页面:-) –

答

你可以尝试像

$(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>

http://jsfiddle.net/arunpjohny/o7tyfa3f/ –

商店IMG和其他分区显示它的点击

相关推荐