JQuery 根据您单击的位置设置 img src

Question

我使用 javascript 在我的网站上加载图片，具体取决于您点击了 ul 中的哪些“小”照片... 我有类似的东西：

<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 元素时，我需要通过参数传递它...

希望我说的够清楚对不起！

Answer 1

karim79 给出了正确的解决方案，但实际上并没有解释您的问题。

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

您不一定需要为缩略图添加类。 $('#ulPhotos a') 会让你很容易地找到他们。我同意在可点击项上使用data- 属性以了解您要显示哪个大图像的建议。

此外，如果您要向 a 元素添加辅助点击行为，您可能希望阻止默认行为发生，例如：

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

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 即可。

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 标签，因为当您将鼠标悬停在缩略图上时会出现标题，我不希望人们看到奇怪的标签为他们...

有时候点击速度有点慢，第一次尝试可以在上一张照片上停留一会儿，可能是因为我没有使用CDN放jquery的缩小版（我看过这样一个建议），不知道，我确实是个初学者，不过也没什么大不了的……

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