gpt4 book ai didi

javascript - 使用javascript替换图像和文本

转载 作者:行者123 更新时间:2023-12-03 05:48:40 25 4
gpt4 key购买 nike

我正在开发我的相机网站。它看起来像这样:

Example of the web page

它是如何工作的:

  • 所有相机、照片、文本都存储在 JSON 数组中。
  • 大图像(“image0”)附带说明文本(位于名为“texte_image0”的 div 中)。
  • 每次单击缩略图(image1 到 image10)时,缩略图都会替换大图像(image0)和描述文本。该文本存储在每个缩略图的“标题”字段中。

这是 image1 的代码:

image1 = "<img class=\"petite\" id=\"image001\" onclick=\"changeImage(image001);\" src=\"photos/" + data.APPAREILS[numero].IMAGE1 + "\" alt=\"" + data.APPAREILS[numero].TEXTE_IMAGE1 + "\" title=\"" + data.APPAREILS[numero].TEXTE_IMAGE1 + "\">";
$('#image1').append(image1);

每次点击缩略图都会调用“change_image”函数:

    function changeImage(numero_image) { //Permet d'afficher l'image cliquée dans le grand cadre, ainsi que le texte associé.
$('#texte_image0').html("");
image000.src = numero_image.src;
$('#texte_image0').append(numero_image.title);
}

正如您所读到的,我将 image0 'src' 字段替换为单击的缩略图 'src' 字段,并使用其 'title' 字段更改 'texte_image0' div 中的描述文本。

此代码在 Mozilla Firefox 中运行良好,但在 Google Chrome/Chromium 中则不然。我想 Chrome/Chromium 中不允许这些替换。

如何修复它?

谢谢!

最佳答案

强调只使用一种方法:

function changeImage(numero_image) { //Permet d'afficher l'image cliquée dans le grand cadre, ainsi que le texte associé.
$("#image1").attr("src", numero_image.src);
}

使用相同的图像。我会做这样的事情:

$(function () {
$(".click").click(function () {
$("#image1").attr("src", this.src);
});
});
body {text-align: center;}
#image1 {display: block; width: 95%; margin: 15px auto;}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<img src="https://placehold.it/100?text=1" alt="" id="image1" />
<img src="https://placehold.it/100?text=1" alt="" class="click">
<img src="https://placehold.it/100?text=2" alt="" class="click">
<img src="https://placehold.it/100?text=3" alt="" class="click">
<img src="https://placehold.it/100?text=4" alt="" class="click">
<img src="https://placehold.it/100?text=5" alt="" class="click">

关于javascript - 使用javascript替换图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40240509/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com