javascript - 单击缩略图时使图像显示在单独的部分

Question

在上面的部分中单击图像的缩略图后，我希望在单独的部分中显示图像。

索引代码：

        <section id="select-image">
        <h2>Step 1. Select an image</h2>
        <p>Select your prefered image</p>
        <div id="ug-images"><img src="/images/ugimage1.jpg"></div>
    </section>
    <section id="add-text">
        <h2>Step 2. Add Text</h2>
        <input id="text" type="text" value="Customise me!">
    </section>
    <section id="style-image">
        <h2>Step 3. Style it!</h2>
        <div id="workspace">

javascript代码：

    $(document).on('click', '#ug-images', function() {
  var url = $(this).data('url');
  $("#workspace img").remove();
  var img = $("<img>").attr('src', url);
  $("#workspace").append(img);
});

要清楚。我希望在 id=Select-image 中选择的缩略图出现在 id=workspace

Answer 1

您可以简单地创建图像的副本并将其附加到工作区

var $workspace = $('#workspace'), //simply caching the selector
    $img = $();

$('#ug-images').on('click', 'img', function () {
    $img.remove();
    $img = $(this).clone().appendTo($workspace);
});

这是一个演示：http: //jsfiddle.net/FpsLJ/

Answer 2

像这样的东西？http://jsfiddle.net/fSyPp/

$(document).on('click', '#ug-images', function () {
    var url = $(this).attr('src');
    $("#workspace img").remove();
    var img = $("img").attr('src', url);
    $("#workspace").append(img);
});

Answer 3

您不需要处理 URL 属性。您可以克隆单击的图像并将其附加到“#workspace”

$(document).on('click', '#ug-images', function () {
  var $newImg = $(this).clone();
  $('#workspace').append($newImg);
});

在这里查看：http: //jsfiddle.net/7jSkx/

Answer 4

<script>
jQuery(document).ready(function(){
    jQuery("#ug-images").click(function(){
        $("#workspace img").remove();
        var url = $(this).find('img').attr('src');
        alert(url);
        $('#workspace').html('<img  src="'+url+'" />')
    });
});
</script>

Answer 5

试试这个

如果您只想显示选定的图像

演示

 $(document).on('click', '#ug-images', function() {
 var img = $(this).find('img').clone();
 $("#workspace").html(img);
});

或如果您想附加您单击的每个图像

演示

$(document).on('click', '#ug-images', function() {
 var img = $(this).find('img').clone();
 $("#workspace").append(img);
});