根据点击的文字更改图片来源？

Question

我想建立一个网页，有以下几点：

图像的

Bob 
Mary 
Sue 
Jane 

<img src="none.jpg"> 
<img src="Bob.jpg"> 
<img src="Mary.jpg"> 
<img src="Sue.jpg"> 
<img src="Jane.jpg"> 

所有最初不可见（display: none;），除了none.jpg。当Bob被点击时，没有人应该消失，并且Bob应该变得可见。最简单的方法是什么？

JavaScript/JQuery是我正在尝试使用的。我找到了可以切换显示属性的方法，但它很笨重，因为它要求我发送有关所有关联图像的命令。

我知道解决方案涉及到加载所有图像，然后只是改变其可见性，但更改来源将解决上述问题。

Answer 1

首先，给所有的图像一个类（让它叫picture）和所有的名称链接另一个（让我们打电话给一个name）。

//When a name is clicked. 
$(".name").click(function() { 
    //Hide all the pictures. 
    $(".picture").hide(); 
    //Get the name from the text of the link. 
    var name = $(this).text(); 
    //Show the one with the right name. 
    $(".picture[src=" + name + ".jpg]").show(); 
} 

如果你不想依靠链接文本和文件名（例如，如果他们不总是一致的），你可以使用自定义属性，像data-name，你可以在jQuery的访问与.attr("data-name")。

正如在评论中指出，也可能只是一个图像（让我们给它的ID picture这段时间），并改变其src属性：

$(".name").click(function() { 
    //Get the name from the text of the link. 
    var name = $(this).text(); 
    //Change the src attribute. 
    $("#picture").attr("src", name + ".png"); 
}); 

请注意，这第二种方法将不会加载页面加载时的所有图像。相反，它们只会在链接被点击时加载。这可能是好的（如果有很多并且可能不需要它们），或者不好（如果用户不得不等待它们是个问题）。你可以绕过preloading。

此外，如果您还想设置src以外的其他属性（如alt），则使用第一种方法可能会更容易。

Disclaimar：我还没有测试代码。