0 
<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; ?>" />');
});
});
});
4

5 回答 5

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();

 }
}
于 2012-09-28T11:39:38.467 回答
0

就像 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+'"/>');
  });
});
于 2012-09-28T11:34:57.620 回答
0 
$('.imageToAppend').click(function(e){  
    $(".appendHere").append(this);
});​

jsFiddle

于 2012-09-28T11:35:53.800 回答
0

假设您尝试附加的图像是 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/

于 2012-09-28T11:36:37.573 回答
0

试试看

$(function(){
    $('.imageToAppend').click(function(e){
        var img = $(this).attr('href');
        $('.appendHere').prepend($('<img/>')
                      .attr('src', img));      
    });
})
于 2012-09-28T11:37:33.410 回答