使用javascript替换图像和文本

Question

我在我的相机网站上工作。这是它的样子：

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);
    }

正如您所看到的，我用点击的缩略图'src'字段替换了image0'src'字段，并使用其'title'字段来更改'texte_image0'div中的描述文字。

此代码在Mozilla Firefox中运行良好，但在Google Chrome / Chromium中却没有。我想Chrome / Chromium中不允许这些替换。

我该如何解决？

谢谢！

Answer 1

明确指出只使用一种方式：

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

Answer 2

这是一个例子

＆＃13;

＆＃13;

var data = [{
  img: "https://dummyimage.com/300x250/ff00ff/ffffff.png&text=1",
  alt: "this is image alt 1",
  desc: "this is image description 1"
}, {
  img: "https://dummyimage.com/300x250/ff00ff/ffffff.png&text=2",
  alt: "this is image alt 2",
  desc: "this is image description 2"
}, {
  img: "https://dummyimage.com/300x250/ff00ff/ffffff.png&text=3",
  alt: "this is image alt 3",
  desc: "this is image description 3"
}];

if (data.length > 1) {
  $("#thumbs").html("");
  changeImage(0);
}
$.each(data, function(k, v) {

  $("#thumbs").append("<img src='" + v.img + "' onclick='changeImage(" + k + ")' title='" + v.alt + "' alt='" + v.alt + "'>");
});



function changeImage(i) {
  $("#top").hide();
  $("#description").html(data[i].desc);
  $("#img").attr("src", data[i].img);
  $("#top").fadeIn("slow");
}

＆＃13;

#top {
  width: 100%;
  height: 200px;
}
#img {
  width: 40%;
}
#img-con {
  width: 40%;
}
#description {
  width: 58%;
  float: right;
}
#img-con,
#description {
  display: inline;
height:98%;
}
#thumbs {
  width: 100%;
  height: 100px;
}
#thumbs img {
padding:2px;
  width: 100px;
  height: 100px;
display:inline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top">
  <div id='img-con'>
    <img id='img' src='default.png'>
  </div>
  <div id='description'>There is no description</div>
</div>
<div id='thumbs'>There is no thumbs</div>

＆＃13;

＆＃13;

＆＃13;