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>

简单地说:就像那样:

<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被硬编码,当我点击我的ul元素#ulPhotos中的特殊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();
});