根据点击位置设置JQuery中的img src

Question

我在网站中使用JavaScript根据单击的“小”照片来加载图片... 我有类似以下的代码：

<script type="text/javascript">
   function viewImage(src, legende) {
      document.getElementById("imageBig").src = "images/photos/"+src;
      document.getElementById("legend").innerHTML = legende;
   }
 </script>

在HTML中，简单地说：

像这样的东西：

<ul id="ulPhotos">
<li>
   <a href="#centre" onclick="javascript:viewImage('flute.jpg','La Reine de la Nuit au Comedia')">
      <img src="images/photos/carre-09.jpg" alt="" />
   </a>
   <a href="#centre" onclick="javascript:viewImage('perichole.jpg','Manuelita - <em>La P&eacute;richole</em> &agrave; l&#8217;Op&eacute;ra Comique')">
      <img src="images/photos/carre-03.jpg" alt="" />
   </a>
</li>
<li>
    <a href="#centre" onclick="javascript:viewImage('12.png','R&eacute;cital &agrave; Carnac, septembre 2008')">
        <img src="images/photos/carre-12.jpg" alt="Marion Baglan Carnac R&eacute;" />
    </a>
    <a href="#centre" onclick="javascript:viewImage('01.jpg','')">
        <img src="images/photos/carre-01.jpg" alt="" />
    </a>
</li>
</ul>

你看，根据你点击无序列表中的哪些小照片，我可以加载一些特定的照片，通过将src字符串作为参数传递给我的viewImage函数...

但我决定使用Jquery来实现淡入效果。但我找不到一种方法来传递一个参数，告诉我的JQuery函数根据我点击的位置加载哪张照片...

卡在这里：

$(document).ready(function(){
    $('#ulPhotos').click(function() {
        var newSrc = $('#imageBig').attr("src", "images/photos/11.jpg");
    }); 
});

我不希望11.jpg被硬编码，当我点击id为#ulPhotos的ul元素中的特定li元素时，需要通过参数传递它...希望我表述清楚了，抱歉！

- KitAndKat

Answer 1

karim79提供了一个正确的解决方案，但并没有真正解释你的问题。

你将click处理程序附加到列表本身而不是直接附加到图像上。当附加的jQuery行为回调触发时，this是被点击的元素，你希望它是围绕图像的a链接。在你当前的情况下，this将是列表本身。

你不一定需要为缩略图添加类。 $('#ulPhotos a')同样可以轻松获取它们。我同意使用data-属性在可点击的元素上，以知道要显示哪个大图像。

此外，如果你确实要为a元素添加二次点击行为，你可能希望防止默认行为发生，所以可以这样做：

$('#ulPhotos a').click(function (event) {
  $('#imageBig').attr('src', $(this).attr('data-big-image'));
  event.preventDefault();
});

- x1a4

---

谢谢，我就是这么做的，使用父子选择器非常容易。正如你所说，我需要将a元素包围在图像周围。我们可以在这里找到更多信息：http://api.jquery.com/descendant-selector/。 - KitAndKat

Answer 2

一个相当直接的解决方案是将所有小图像分配一个共同的（拇指或其他）类，并在它们的rel属性中存储更大图像的文件名，例如：

<img src="something.jpg" rel="something_big.jpg" class="thumb"/>
<img src="somethingElse.jpg" rel="somethingElse_big.jpg" class="thumb"/>
<img id="bigImage" src="something_big.jpg"/>

$(".thumb").click(function() {
    $("#bigImage").attr('src', $(this).attr("rel"));
});

data 是另一种您可能考虑的存储机制。

按照特定约定并基于所点击的较小图像的 src，“组装”较大图像的文件名也是非常常见（且简单）的做法，例如：

<img src="something.jpg" class="thumb"/>
<img src="somethingElse.jpg" class="thumb"/>
<img id="bigImage" src="big_something.jpg"/>

$(".thumb").click(function() {
    $("#bigImage").attr('src', 'big_' + $(this).attr("src"));
});

这假定你的所有全尺寸图像都以'big_'为前缀，所以只需将'big_'追加到所单击缩略图的src即可。

- karim79

---

谢谢，现在对我来说清晰多了。我使用了前缀的想法，每个大图都以“big”开头，谢谢！ - KitAndKat

Answer 3

感谢你们两位，我的网站现在可用了，我提供最终的代码给像我这样的初学者，他们可能有同样的需求...

以下是函数代码：

<script type="text/javascript">
     $(document).ready(function(){

$('#ulPhotos a').click(function() {
    var newSrc= $(this).find('img').attr('src').split("/");
    bigPictureName = 'big'+newSrc[2];
    $('#imageBig').attr("src", "images/photos/"+bigPictureName).hide();
    $('#imageBig').fadeIn('fast');

    var alt = $(this).find('img').attr('alt'); 
    $('#legend').html(alt);
    }); 
    });

</script>

以下是 HTML 元素：

 <ul id="ulPhotos">
      <li><a href="#centre"><img src="images/photos/09.jpg" title="La Reine de la Nuit au Comedia" alt="<em>La Reine de la Nuit</em> au Comedia"/></a>
    <a href="#centre"><img src="images/photos/03.jpg" title="Manuelita, La Périchole à l&rsquo;Opéra Comique" alt="Manuelita, <em>La Périchole</em> à l&#8217;Opéra Comique" /></a></li>
    <li><a href="#centre" ><img src="images/photos/12.png" title="" alt="Marion Baglan Carnac Ré" /></a>

我使用了alt属性来附加图例，以便能够添加一些HTML标记，如<em>，因为当您将鼠标悬停在缩略图上时，标题会出现，我不希望人们看到奇怪的标记...

有时，当您快速点击时，它可能会有点慢，第一次尝试可能会在前一个照片上停留一段时间，也许是因为我没有使用CDN来放置jquery的压缩版本（我读到这样的建议），不知道，我真的是个初学者，但无论如何都不是什么严重的问题...

顺便说一下，页面在这里..http://www.marion-baglan.net/photos.htm

- KitAndKat