jqueryを使用して各リストのクリックでイメージを追加する方法

Question

各グリッドリストをクリックすると、現在のイメージがサムリストに表示されます 親指リストに表示する4つの異なるイメージのように 私はこれを試してみますコードの下に。

$(function() { 
 
    var imageTag = $('<img src="" alt="">'); 
 

 
    $('.grid ul li').each(function() { 
 
    $(this).on('click', function() { 
 
     var img = $(this).find('img').attr('src'); 
 
     $('.thumb ul li').find('img').attr('src', img); 
 
    }); 
 
    }); 
 
    $('.thumb ul li').append(imageTag); 
 
});

body { 
 
    padding: 0; 
 
    margin: 0 
 
} 
 
img { 
 
    max-width: 100%; 
 
    vertical-align: middle; 
 
} 
 
.row { 
 
    max-width: 900px; 
 
    padding: 0 15px; 
 
    width: 100%; 
 
    margin: 0 auto 
 
} 
 
ul { 
 
    overflow: hidden; 
 
    padding: 0; 
 
    margin: 0 -15px; 
 
} 
 
ul li { 
 
    border: 1px solid #333; 
 
    list-style: none; 
 
    width: 25%; 
 
    float: left; 
 
    padding: 10px; 
 
    margin: 0 10px 20px; 
 
} 
 
.thumb { 
 
    background-color: #999; 
 
    position: fixed; 
 
    width: 100%; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 20px; 
 
} 
 
.thumb ul li { 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0 10px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="grid"> 
 
    <ul> 
 
     <li> 
 
     <img src="http://aakko.in/demo/images/1.jpg" alt=""> 
 
     </li> 
 
     <li> 
 
     <img src="http://aakko.in/demo/images/2.jpg" alt=""> 
 
     </li> 
 
     <li> 
 
     <img src="http://aakko.in/demo/images/3.jpg" alt=""> 
 
     </li> 
 
     <li> 
 
     <img src="http://aakko.in/demo/images/4.jpg" alt=""> 
 
     </li> 
 
     <li> 
 
     <img src="http://aakko.in/demo/images/5.jpg" alt=""> 
 
     </li> 
 
     <li> 
 
     <img src="http://aakko.in/demo/images/6.jpg" alt=""> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="thumb"> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

$(function() { 
 
    $('.grid ul li').on('click',function(){ 
 
\t \t var thumb = $('.thumb ul li'); 
 
\t \t var thumbAct = $('.thumb ul li.active').length; 
 
\t \t var img = $(this).find('img').clone(); 
 
\t \t thumb.eq(thumbAct).addClass('active').append(img); 
 
\t }); 
 
});

body { 
 
    padding: 0; 
 
    margin: 0 
 
} 
 
img { 
 
    max-width: 100%; 
 
    vertical-align: middle; 
 
} 
 
.row { 
 
    max-width: 900px; 
 
    padding: 0 15px; 
 
    width: 100%; 
 
    margin: 0 auto 
 
} 
 
ul { 
 
    overflow: hidden; 
 
    padding: 0; 
 
    margin: 0 -15px; 
 
} 
 
ul li { 
 
    border: 1px solid #333; 
 
    list-style: none; 
 
    width: 25%; 
 
    float: left; 
 
    padding: 10px; 
 
    margin: 0 10px 20px; 
 
} 
 
.thumb { 
 
    background-color: #999; 
 
    position: fixed; 
 
    width: 100%; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 20px; 
 
} 
 
.thumb ul li { 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 0 10px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="grid"> 
 
    <ul> 
 
     <li> 
 
     <img src="http://aakko.in/demo/images/1.jpg" alt=""> 
 
     </li> 
 
     <li> 
 
     <img src="http://aakko.in/demo/images/2.jpg" alt=""> 
 
     </li> 
 
     <li> 
 
     <img src="http://aakko.in/demo/images/3.jpg" alt=""> 
 
     </li> 
 
     <li> 
 
     <img src="http://aakko.in/demo/images/4.jpg" alt=""> 
 
     </li> 
 
     <li> 
 
     <img src="http://aakko.in/demo/images/5.jpg" alt=""> 
 
     </li> 
 
     <li> 
 
     <img src="http://aakko.in/demo/images/6.jpg" alt=""> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="thumb"> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </div> 
 
</div>