Question

我正在开发一个项目，当我点击缩略图时，图片应该放大并显示下面图片的名称（alt）..我已经得到它几乎工作，但无论如何我点击的缩略图，它只显示其中一个图像.. 的 HTML

<div id="vacationimages">
    <p>  Click on the Image that best represents the kind of vacation you want</p>
    <p>  <img src="mountain link" alt="Mountain Vacation"></p>
    <p>  <img src="desert link" alt="Desert Vacation"></p>
    <p>  <img src="ocean link" alt="Ocean Vacation"></p>
</div>

<div id="bigimage">
    <img id="currentimage" src="ocean link" alt="ocean vacation" width="300" height="225" border="0"
    <p id="imagedesc">  </p>
</div>

使用Javascript / jQuery的

$('#vacationimages').each(function() 
{
    var vacaimg = new Image();
    vacaimg.src = $(this).attr("src");
});

$('#vacationimages').click(function(event) {
    var imgsrc = $(this).attr('src');
    var imgalt = $(this).attr('alt');
    $("#bigimage").toggle('');
    $(this).css('display', '');

    event.stopPropagation();

    var imagedisc = $(this).attr(imgalt);
    $('#imagedisc').text(imagedisc);
});

我希望这是清晰易读的。我无法提供实际的图片链接，但希望这会给你一个好主意。

我也无法更改HTML，因此只需更改javascript。

编辑＃1 这里是JSFiddle链接http://jsfiddle.net/CodeGirl91/kfnzngu8/

此外，并非项目中的所有内容都可用，也就是隐藏和提交按钮，我只是担心此刻的图片。 编辑结束＃1

Answer 1

你的一个问题是你正在捕捉拇指周围的div上的点击。你也正在分配一些东西

$('#vacationimages img').click(function(event) {
    var imgsrc = $(this).attr('src');
    var imgalt = $(this).attr('alt');
  
  console.log(imgsrc);
  
    /*Not exacly sure what you are tring to do here*/
    /*So commented out for now*/
    /*$("#bigimage").toggle('');
    $(this).css('display', '');*/
    /*Taking a guess at what you want*/
    $("#bigimage").show();

    $("#currentimage").attr("src", imgsrc);
    event.stopPropagation();
  
    var imagedisc = $(this).attr(imgalt);
    $('#imagedesc').html(imgalt);
  
});

#vacationimages img
{
  height:75px;
}

#bigimage
{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="vacationimages">
    <p>  Click on the Image that best represents the kind of vacation you want</p>
    <p>  <img src="http://placehold.it/350x150/ff0000/ffffff&text=MountainVacation" alt="Mountain Vacation"></p>
    <p>  <img src="http://placehold.it/350x150/00ff00/ffffff&text=DesertVacation" alt="Desert Vacation"></p>
    <p>  <img src="http://placehold.it/350x150/0000ff/ffffff&text=OceanVacation" alt="Ocean Vacation"></p>
</div>

<div id="bigimage">
    <img id="currentimage" src="ocean link" alt="ocean vacation" />
    <p id="imagedesc">  </p>
</div>

请注意，我已从height中删除了width和bigimage属性。我这样做的主要原因是宽高比与我选择的快速和肮脏的图像不同。他们可以留在那里，但请注意，他们已经用HTML进行了描述并且已经有一段时间了。

在jQuery中单击使用alt选择多个图像

1 个答案: