0

画像のサムネイルが上のセクションでクリックされた後、別のセクションに画像が表示されるようにしています。

索引コード:

        <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 に表示させたい

4

5 に答える 5

0 
<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>
于 2013-09-23T16:49:29.350 に答える
0

画像のコピーを作成してワークスペースに追加するだけです

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/

于 2013-09-23T16:44:20.110 に答える
0

このようなもの？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);
});
于 2013-09-23T16:44:49.553 に答える