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">

除none.jpg外，所有图像最初都是不可见的（display: none;）。点击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();
}

如果您不想依赖链接文本和文件名（例如，如果它们并不总是匹配），您可以使用可以在jQuery中访问的自定义属性，如data-name .attr("data-name")。

正如评论中指出的那样，您也可以只有一个图片（这次让我们给它标识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：我没有测试过代码。

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

1 个答案: