Question

<a class="imageToAppend" href="img/image.jpg">Click image to show</a>
<a class="imageToAppend" href="img/image1.jpg">Click image to show</a>
<a class="imageToAppend" href="img/image2.jpg">Click image to show</a>

<div class="appendHere"></div>

我想在点击链接时显示图像，链接包含指向图像的链接。并将图像附加到div

我有一个jQuery代码，但它显示所有图像，我只想显示点击的链接图像

jQuery(window).load(function(){
jQuery(function() {
jQuery('.imageToAppend').click(function(e){
e.preventDefault();
jQuery(".screenshot").prepend('<img src="<?php echo $photo->sourceImageFilePath; ?>" />');
});
});
});

Answer 1

试试这个

$(document).ready(function){
 $('a.imageToAppend').click(function(e){
  var currentLink=$(this);

  $('#appendHere').empty() // remove existing img/html, if added already
  //generate image tag on fly and assign src from current anchor clicked and add to div
  $('<img />').attr("src",$(currentLink).attr("href")).appendTo($('#appendHere'));
  e.preventDefault();

 }
}

Answer 2

像Deepak提到的那样，你无法在客户端评估PHP，但是你可以从中读取文件名

尝试这样的事情：

jQuery(window).load(function(){
  jQuery('.imageToAppend').click(function(e){
    e.preventDefault();
    var src = $(this).attr('href');   //$this will be the <a> clicked
    jQuery(".screenshot").prepend('<img src="'+src+'"/>');
  });
});

Answer 3

$('.imageToAppend').click(function(e){  
    $(".appendHere").append(this);
});

jsFiddle

Answer 4

假设您尝试追加的图像是href路径中的图像......

$('.imageToAppend').bind('click', function(e) {
    e.preventDefault();
    var url = $(this).attr('rel'),
        el = $('.appendHere');
    el.fadeOut('slow', function(){
        el.empty().text('Loading...').fadeIn().delay('400').fadeOut(function(){
            $(this).empty();
            $('<img src="' + url + '" />').appendTo(el);
            $(this).fadeIn();
        });
    });
});

http://jsfiddle.net/shannonhochkins/TEPKd/

Answer 5

试试

$(function(){
    $('.imageToAppend').click(function(e){
        var img = $(this).attr('href');
        $('.appendHere').prepend($('<img/>')
                      .attr('src', img));      
    });
})

在点击时将img附加到div中

5 个答案: