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

试试这个

如果您只想显示所选图像

DEMO

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

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

DEMO

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

单击缩略图时，使图像显示在单独的部分中

5 个答案:

DEMO

DEMO