Question

我有一个像我这样的菜单：

<ul>
     <li><a href="#1">Image #1</a></li>
     <li><a href="#2">Image #2</a></li>
     <li><a href="#3">Image #3</a></li>
     <li><a href="#4">Image #4</a></li>
</ul>

我有一个容器，其图像如下：

<div id="image-container">
     <img src="images/1.jpg">
</div>

我想使用“hash”和“load”切换“image-container”div中的图像（每个图像都在/ image /文件夹中，每个图像都被命名为哈希，所以加载images / 2.jpg等< / p>

我正在尝试这种方式：

$("#ul li:nth-child(1)").click(function(e) { 
        e.preventDefault();   
        var hash = this.parentNode.hash;  
        $("#image-container").load('images/'+ hash.substring(1) +'.jpg');

$("#ul li:nth-child(2)").click(function(e) { 
        e.preventDefault();   
        var hash = this.parentNode.hash;  
        $("#image-container").load('images/'+ hash.substring(1) +'.jpg');

$("#ul li:nth-child(3)").click(function(e) { 
        e.preventDefault();   
        var hash = this.parentNode.hash;  
        $("#image-container").load('images/'+ hash.substring(1) +'.jpg');

(...)

但它不能很好地工作（我想我需要一些与加载略有不同的东西，因为它不会改变我的图像？）。

非常感谢。

顺便说一下 - 有没有办法让我的jQuery代码更短（在一个函数中，因为现在我有多个具有相同的主体）？

非常感谢，阿达：）

Answer 1

您可以将代码编写得更短，如下所示：

$("ul li a").click(function(e) { 
  e.preventDefault();   
  $("#image-container img").attr('src', 'images/'+ this.hash.substring(1) +'.jpg');
});

You can try it out here，与原作有一些变化：

将处理程序附加到<a>，它具有哈希
您可以将同一个处理程序绑定到多个元素，只需使用一个选择器来抓取您想要的所有元素
从this获取来自this引用的<a>元素
您<ul>没有id="ul"属性，因此选择器应为ul，而不是#ul
请勿使用.load()用于提取内容，而是使用src <img>使用.attr()。

使用jQuery加载图像？

1 个答案: